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

Question

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

原因：CORS请求未成功）

（原因：CORS header‘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

编码，获取文件，但 return 响应状态 0，模式：'opaque'.

请帮助我。

Answer 1

我相信你知道你在这里想要实现的目标。 Fetch with CORS 用例非常棘手。 CORS 由服务器设置驱动。所有的headers ACCESS-CONTROL-*都是在服务器端设置的。

Access-Control-Allow-Origin 用于 CORS，客户端在处理 cross-origin 请求时遵守此 header。服务器在响应中发送此 header。从服务器端，你必须传递这个header。在您的回复中，您必须传递此 header.

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 2

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

Answer 3

如果您的主机有一个 PHP 文件文件，您需要在另一个 PHP 文件中调用您想要调用的内容，您将需要多次将此代码添加到您想要的 PHP 文件中想打电话给 line_2

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

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

How to resolve CORS error in Fetch API js

javascript

fetch

cors

fetch-api