javascript - 无法使用 Fetch API 从本地主机加载 Deezer API 资源

Question

我正在尝试从本地主机访问 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('http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem')。

我做错了什么？

Answer 1

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

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

通过 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 header 添加到响应并将其传递回您的请求前端代码。

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

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

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