在 javascript 中使用 fetch 请求 API 存在 CORS 策略错误

Posted 2023-02-27

【中文标题】在 javascript 中使用 fetch 请求 API 存在 CORS 策略错误

【英文标题】：Requesting API with fetch in javascript has CORS policy error

【发布时间】：2019-10-16 04:36:02

【问题描述】：

我正在尝试在我的 javascript 代码中使用 fetch 调用一些 API。我正在我的机器上使用 ReactJs 进行开发，并在同一个网络中进行另一个开发，在另一台机器上使用 .net 开发 API。使用邮递员，我可以调用 API，但使用 fetch 没有。我尝试在其他服务器调用另一个API，结果成功。

我正在使用 fetch 并尝试使用 axios。我在堆栈溢出的其他问题中发现了这个 API：https://gturnquist-quoters.cfapps.io/api/random。 答案是尝试获取它们，我尝试但再次抛出相同的错误。

我获取 gturnquist API 的代码：

const myHeader = new Headers();
myHeader.append('Content-Type', 'application/json');
fetch('http://gturnquist-quoters.cfapps.io/api/random', 
  method: 'GET', headers: myHeader,
)
 .then((res) => 
   console.log(res);
   return ;
 )
 .then(res => console.log(res));

和我的代码来获取我需要的 API：

const myHeader = new Headers();

const token = 'mytoken';
myHeader.append('id-tenant', token);
myHeader.append('Content-Type', 'application/json');

const id = 'myid';
const url = 'myurl';

fetch(`http://10.1.1.35/$url/$id`, 
  method: 'GET',
  headers: myHeader,
).then(res => res.json()).then(res => console.log(res));

当我尝试调用 API 时出现此错误

选项http://10.1.1.35/url/id 503（服务不可用）

从源“http://localhost:3000”获取“http://10.1.1.35/url/id”的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

Uncaught (in promise) TypeError: Failed to fetch

这是服务器端错误还是 javascript 错误？

在我的服务器中，API 的配置类似于Rajkumar Peter 的答案

编辑：My network error

解决我的错误时遇到的问题：Fetch CORS error with instagram apiEnable CORS in fetch apimanaging CORS with fetch API GET requestReact fetch has error fetch was blocked by CORS policyResponse to preflight request doesn't pass access control check

【问题讨论】：

试试firefox插件CORS Everywhere

我尝试了一个这样的chrome插件，但不起作用。

Allow-Control-Allow-Origin: * 现在不适用于 chrome。但我在 Firefox 上与 CORS Everywhere 合作，一切都很好。也许它可以解决您的问题

所以当我进行生产构建时，如果没有插件，这个错误会持续存在吗？

当您解决了问题后，请不要在您的问题中添加“已解决”或类似的短语。如果有人给你答案，accept it。如果您自己找到了解决方案，post an answer（您也可以在两天后接受自己的答案）。接受答案也是表明问题已解决的方式 - 将“已解决”编辑到问题中不是。

【参考方案1】：

从网络浏览器执行 API 调用时，它通常会执行称为“预检检查”的操作。这实际上是浏览器向您的 API 发送请求的地方（在您自己的 API 调用之前），以检查允许执行的操作以及是否值得发送实际请求。

为此，它使用 OPTIONS 方法（而不是 GET、POST 等）。

如果您的 API 端点尚未配置为接受 OPTIONS 请求，则来自浏览器的预检请求将失败 - 并且它将中止发送您的请求。

要解决您的问题，您需要将 API 配置为接受 OPTIONS 方法。您还应该检查允许哪些来源（连接到 API 的客户端的 IP 地址）。

【讨论】：

是的，当然。但是在我的服务器中，我有这个代码***.com/a/43809068/11544879，它应该允许任何标题、来源和方法。在这种情况下不输入 OPTIONS？

澄清一下，您的 API 是用什么语言构建的？

在 .net Core 2.2 中构建

我的 ASP.NET 不是很好。不过，您不应该从 OPTIONS 请求中收到 500 错误。因此，我此时的假设是您实施 CORS 策略的方式存在问题。您确定“Microsoft.AspNetCore.Cors”在 .net 2.2 中可用吗？

在这一点上，我唯一的建议是可能会问另一个问题 - 这一次集中在配置您的 API 服务器上。您描述的问题与您的客户无关 - 因此从技术上讲，超出了这个问题的范围，也超出了我的专业知识。