使用 fetch API 的 CORS 错误 - 反应创建应用程序

Posted 2023-03-04

【中文标题】使用 fetch API 的 CORS 错误 - 反应创建应用程序

【英文标题】：CORS error using fetch API - React create app

【发布时间】：2019-09-27 18:28:33

【问题描述】：

我正在使用 fetch 使用 API，但出现 CORS 错误。 我尝试了多个标题，但我不明白这是什么问题。

我不是 API 的所有者，所以我无法更改它，但请检查它返回的响应 access-control-allow-origin。

以下是我的请求方法：

export const execPOST = (url, body) => 
  return fetch(url, 
    method: "POST",
    headers: 
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    ,
    body: JSON.stringify(body)
  );
;

回复是：

Request URL: http://api
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
Remote Address: ip
Referrer Policy: no-referrer-when-downgrade
Response Headers:
Access-Control-Allow-Origin: *

以上回复还不足以允许我的请求吗？

控制台错误：

OPTIONS http://api net::ERR_ABORTED 405（不允许的方法） 从源 'http://localhost:3000' 在 'http://api' 获取的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

我使用"https://cors-anywhere.herokuapp.com/" 得到了这个工作（同时我正在开发），但我认为我不应该将它用于生产环境。

我找到了很多关于这个问题的材料，但是除了实现一个后端来发出请求或使用其他东西作为代理来发出请求等等之外，没有任何其他的工作......

【问题讨论】：

是什么让您说您收到 CORS 错误？... 显然该错误是因为您所针对的端点不允许该方法。可以试试用rest客户端调试吗？

我编辑了我的问题，添加了 chrome 控制台日志。使用 postman 或 soapui 就可以了

API 不响应 OPTIONS 请求（也称为预检）。为避免预检，请勿设置自定义标头。

我认为你只是运气不好。

在您的请求中设置 Access-Control-Allow-Origin 标头没有意义...这是服务器设置的标头，用于指示您是否可以通过跨域请求访问 URL或不。它是 CORS 安全性的重要组成部分。如果请求者可以将标头设置为他们想要的任何内容，那么显然它不会提供任何安全性

【参考方案1】：

更新代码如下（使用 'mode' 和值 'no-cors' ）：

更多详情请点击链接 => https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

export const execPOST = (url: string, body: any) => 
  return fetch(url, 
    mode: 'no-cors',
    method: 'POST',
    headers: 
      'Content-Type': 'application/json'
    ,
    body: JSON.stringify(body)
  );
;

【参考方案2】：

CORS 标头由 API 设置，以保护用户免受恶意代码代表他们向网站发出请求。

这意味着您无法从客户端启用或禁用它，因为 Access-Control-Allow-Origin 标头是仅服务器端的标头。

如果您无权访问 API 来更改标头，那么您将无法从客户端使用 API。

在生产中，您必须创建自己的 API 来处理对您尝试联系的 API 的请求。

【讨论】：

This means that you cannot disable it from the client side 我可以建议将这行修改为“启用或禁用”吗？

If you don't have access to the API to change the headers then you won't be able to use the api. 这并不完全正确； CORS 仅适用于浏览器请求。托管服务器上的代理 API 端点不受 CORS 规则的约束。

感谢@Amy，我已经更新它以提及客户端

感谢您的回复。就像我在问题中发布的那样，服务器已经返回“Access-Control-Allow-Origin”。这还不足以让客户端请求工作吗？

从错误消息来看，服务器可能没有实现对预检OPTIONS 请求的响应，这意味着您得到了不允许的方法和 CORS 错误。无论哪种方式，如果您无法对服务器进行更改，这都不是您可以修复的。您必须实施一个后端解决方案来将请求代理到 API。