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代理提出请求;要做到这一点，尝试将您的代码更改为：

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

然后，浏览器将允许您的前端代码访问响应，因为具有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 2

对服务器发出的CORS或Cross Origin请求

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可能无法访问生成的Response的任何属性。这可确保ServiceWorkers不会影响Web的语义，并防止因跨域泄漏数据而导致的安全和隐私问题

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); });

无法使用Fetch API

3 个答案:

无CORS定义