无法使用 Fetch API 从 localhost 加载 Deezer API 资源

Question

我正在尝试从 localhost 访问 Deezer API，但我不断收到以下错误：

Fetch API cannot load http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost' is therefore not allowed access.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

localhost 的响应标头确实有 Access-Control-Allow-Origin 标头 （访问控制允许来源：*）。

我正在使用 fetch，例如： fetch('http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem').

我做错了什么？

Answer 1

向服务器发出的 CORS 或跨域请求

http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem

在这种情况下，所有现代浏览器都启用预检检查。

如果服务器没有以Access-control 标头响应，通常会失败。

如果是fetch，因为你基本上是在摆弄Javascript，

您需要服务器以灵活的Access-control-Allow-Origin 标头进行响应。

您无能为力，除非 API 本身变得灵活且更开放。

但是，您可以使用 fetch 并将模式设置为 no-cors

IFFF 你只希望缓存你提出的请求的结果，作为响应，而不是自己消费它

阅读Opaque Responses

无CORS定义

no-cors — 防止方法成为 HEAD、GET 或 POST 以外的任何方法。如果任何 ServiceWorkers 拦截了这些请求，它们可能不会添加或覆盖除这些之外的任何标头。此外，JavaScript 可能不会访问结果响应的任何属性。这样可以确保 ServiceWorker 不会影响 Web 的语义，并防止因跨域泄露数据而引起的安全和隐私问题

Answer 2

您可以通过公共 CORS 代理发出请求；为此，请尝试将您的代码更改为：

fetch('https://cors-anywhere.herokuapp.com/http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem')

通过https://cors-anywhere.herokuapp.com 发送请求，https://cors-anywhere.herokuapp.com 将请求转发到http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem，然后接收响应。 https://cors-anywhere.herokuapp.com 后端将 Access-Control-Allow-Origin 标头添加到响应中，并将其传递回您的请求前端代码。

然后浏览器将允许您的前端代码访问响应，因为带有Access-Control-Allow-Origin 响应标头的响应是浏览器看到的。

您还可以使用 https://github.com/Rob--W/cors-anywhere/ 轻松设置自己的 CORS 代理

详细了解当您使用 XHR 或 JavaScript 库中的 Fetch API 或 AJAX 方法从前端 JavaScript 代码发送跨域请求时浏览器会做什么，以及有关必须接收哪些响应标头才能让浏览器允许前端代码的详细信息访问回复——请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。

Answer 3

目前，无法提出此请求。您可以从自己的后端代理对 API 的请求或使用 jsonp。这是一个具有类似 fetch 语法的库 https://github.com/camsong/fetch-jsonp。用法示例https://jsfiddle.net/4dmfo0dd/1/

fetchJsonp('https://api.deezer.com/search/track/autocomplete?limit=1&q=eminem&output=jsonp')
.then(function(response) {
    return response.json();
  })
  .then(json => console.log(json))
  .catch(function(error) { console.log(error); });