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

Question

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

原因：CORS请求未成功）

（原因：缺少CORS头访问控制允许起源

我的类似代码：

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，模式：“不透明”。

请帮帮我。

Answer 1

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

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

Answer 2

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

访问-控制-允许-起源是针对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

Answer 3

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