如何解决 Fetch API js 中的 CORS 错误

Posted 2023-02-27

【中文标题】如何解决 Fetch API js 中的 CORS 错误

【英文标题】：How to resolve CORS error in Fetch API js

【发布时间】：2021-09-27 06:51:48

【问题描述】：

我想从我的子域（文件托管服务器）获取 json，但它收到以下错误：

原因：CORS 请求未成功）

（原因：CORS 标头“Access-Control-Allow-Origin”缺失

我的类似代码：

async function getData(url = '', data = ) 
    const response = await fetch(url, 
    method: 'get',
    mode: 'no-cors',
    headers: 
       'Access-Control-Allow-Origin' : '*'
    ,
  );
  return response.json();

我添加

headers: 
                               'Access-Control-Allow-Origin' : '*'

但不工作。

我添加

mode: no-cors

编码，获取文件但返回响应状态 0 ，模式：'opaque'。

请帮帮我。

【问题讨论】：

请将实际获取代码添加为minimal reproducible example?

这能回答你的问题吗？ Enable CORS in fetch api

您需要将这些标头添加到url 的服务器响应中，您无法从获取请求中执行此操作。

您必须在响应中的服务器上设置此标头。不在请求中。 '访问控制允许来源'：'*'

【参考方案1】：

如果您调用的主机 api 文件是 php，请将其添加到第 2 行的 php 文件中

header("Access-Control-Allow-Origin: *");

【参考方案2】：

CORS是通过服务器端配置的，所以你需要在你的文件托管服务器上配置

【参考方案3】：

我相信你知道你在这里想要实现什么。使用 CORS 用例进行获取非常棘手。 CORS 由服务器设置驱动。所有的headers ACCESS-CONTROL-*都是在服务端设置的。

Access-Control-Allow-Origin 用于 CORS，客户端在处理跨域请求时会遵守此标头。服务器在响应中发送此标头。从服务器端，您必须传递此标头。在您的回复中，您必须传递此标头。

Access-Control-Allow-Origin: *

或者，如果您正在处理凭据（此处不支持通配符）：-

Access-Control-Allow-Origin: https://foo.example 

参考：-

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch