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

Question

我正在使用HTML5 fetch 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"标头.原产地" :HTTP //本地主机,因此"是不允许访问.如果不透明响应满足您的需求,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.

Answer 1

像epascarello所说,托管资源的服务器需要启用CORS.您可以在客户端(也可能是您正在考虑的)设置获取CORS的模式(尽管这是我认为的默认设置):

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

但是,这仍然需要服务器启用CORS,并允许您的域请求资源.

查看CORS文档,这个非常棒的Udacity视频解释了同源策略.

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

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

Answer 2

这对我有用：

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 3

我知道这是一篇较旧的帖子，但我发现解决此错误的方法是使用我服务器的 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 4

I had my front code running in http://localhost:3000 and my API(Backend code) running at http://localhost:5000

Was using fetch API to call the API. Initially it was throwing "cors" error. Then added this below code in my Backend API code, allowing origin and header from anywhere.

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

However you should restrict the you origins in case of other environments like stage, prod.