使用 HTML5 获取 API 允许访问控制允许来源标头

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”标头。因此不允许访问源“ http://localhost ”。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

原文由 iNikkz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 epascarello 所说，托管资源的服务器需要启用 CORS。您可以在客户端执行的操作（可能还有您正在考虑的操作）是将获取模式设置为 CORS（尽管我认为这是默认设置）：

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

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

查看 CORS 文档，以及解释同源 策略 的 Udacity 视频。

您也可以在客户端使用 no-cors 模式，但这只会给您一个不透明的响应（您无法读取正文，但响应仍然可以由 service worker 缓存或由某些 API 使用，例如 <img> ）：

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

原文由 David 发布，翻译遵循 CC BY-SA 3.0 许可协议