使用 fetch API 时出现 CORS 错误 - React 创建应用程序

Question

我正在使用 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: *

上面的回复还不足以满足我的请求吗？

控制台错误：

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

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

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

Answer 1

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

有关更多详细信息，请点击链接 => 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)
  });
};

Answer 2

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

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

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

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