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

我正在尝试从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：
取( ‘http://api.deezer.com/search/track/autocomplete?limit=1\u0026amp;q=eminem’).

我究竟做错了什么？

解决方法:

您可以通过公共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\u0026amp;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.

标签：fetch-api,javascript,cors,localhost,deezer
来源： https://codeday.me/bug/20190926/1819269.html