Question

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

此回复是否还不够我的要求？

控制台错误：

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

我使用"https://cors-anywhere.herokuapp.com/"进行了此工作（同时开发），但是我不认为我应该在生产环境中使用它。

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

Answer 1

CORS标头由API设置，以保护用户免受代表他们向网站发出恶意代码的攻击。</ p>

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

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

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

Answer 2

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

有关更多详细信息，请点击链接=> https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

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

使用提取API的CORS错误-React创建应用

2 个答案: