使用 HTML5 fetch API 允许 Access-Control-Allow-Origin 标头

Question

我正在使用 HTML5 提取 API。

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

我可以使用普通的 json 但无法获取上述 api url 的数据。 它抛出错误：

Fetch API 无法加载 https://davidwalsh.name/demo/arsenal.json。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

Answer 1

解决本地环境问题的解决方案

我的前端代码在 http://localhost:3000 运行，我的 API（后端代码）在 http://localhost:5000 运行

正在使用 fetch API 调用 API。最初，它抛出“cors”错误。 然后在我的后端 API 代码中添加以下代码，允许来自任何地方的源和标头。

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

但是，在舞台、产品等其他环境的情况下，您必须限制来源。

严格禁止用于更高的环境。

Answer 2

您需要在请求数据的服务器端设置 cors 标头。 例如，如果您的后端服务器使用 Ruby on rails，请在发回响应之前使用以下代码。应该为任何后端服务器设置相同的标头。

headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'

Answer 3

看https://expressjs.com/en/resources/middleware/cors.html 你必须使用cors。

安装：

$ npm install cors

const cors = require('cors');
app.use(cors());

您必须将此代码放在您的节点服务器中。

Answer 4

这对我有用：

npm install -g local-cors-proxy

我们要请求的具有 CORS 问题的 API 端点：

https://www.yourdomain.com/test/list

启动代理：

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

然后在您的客户端代码中，新的 API 端点：

http://localhost:8010/proxy/test/list

最终结果将是对 https://www.yourdomain.ie/test/list 的请求，但不会出现 CORS 问题！

Answer 5

如果你使用 nginx 试试这个

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }

Answer 6

我知道这是一篇较旧的帖子，但我发现解决此错误的方法是使用我的服务器的 IP 地址，而不是在我的获取请求中使用域名。 比如：

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Answer 7

就像 epascarello 所说，托管资源的服务器需要启用 CORS。您可以在客户端做的（可能是您正在考虑的）将获取模式设置为 CORS（尽管这是我相信的默认设置）：

fetch(request, {mode: 'cors'});

但是，这仍然要求服务器也启用 CORS，并允许您的域请求资源。

查看CORS documentation，这个awesome Udacity video 解释了Same Origin Policy。

您也可以在客户端使用 no-cors 模式，但这只会给您一个不透明的响应（您无法读取正文，但响应仍可以由服务工作者缓存或由某些 API 使用, 比如<img>):

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});