Cannot load Deezer API resources from localhost using Fetch API
I am trying to access the Deezer API from localhost, but I keep getting the following error:
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 mode to 'no-cors' to fetch the resource with CORS disabled.
The localhost response headers have an Access-Control-Allow-Origin (Access-Control-Allow-Origin: *) header.
I use the fetch as
fetch('http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem')
.
What am I doing wrong?
source to share
You can make the request through a public CORS proxy; for this try changing your code to:
fetch('https://cors-anywhere.herokuapp.com/http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem')
This sends a request through https://cors-anywhere.herokuapp.com , which redirects the request to http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem
and then receives a response. The backend https://cors-anywhere.herokuapp.com
adds a header Access-Control-Allow-Origin
to the response and passes it back to your requesting interface.
The browser will then allow your external code to access the response, because that response with the response header Access-Control-Allow-Origin
is what the browser sees.
You can also easily set up your own CORS proxy using https://github.com/Rob--W/cors-anywhere/
Learn more about what browsers do when you make cross-origin requests from external JavaScript using XHR or Fetch APIs or AJAX from JavaScript libraries, and what response headers should be received in order for browsers to accept external code for access to answers - see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS .
source to share
CORS or Cross Origin requests made by servers
http://api.deezer.com/search/track/autocomplete?limit=1&q=eminem
in this case the pre-check of all modern browsers is checked.
and usually fails if the server doesn't respond with headers Access-control
.
In the case fetch
too, since you are mainly playing with Javascript
,
You need the server to respond with headers Access-control-Allow-Origin
that are flexible.
There is not much you can do. Unless the API itself becomes flexible and more open.
However, you can use fetch
with the mode set tono-cors
IFFF you only want to cache the result of the request you are making to serve as a response, and not consume it yourself
Read Opaque Answers
Definition of non-CORS
no-cors - Prevents use of a method other than HEAD, GET or POST. If any ServiceWorkers intercept these requests, they cannot add or override any headers other than these. Also, JavaScript cannot access any properties of the response it receives. This ensures that ServiceWorkers do not interfere with the semantics of the Web and prevents security and privacy issues that arise from data leaks across domains.
source to share
This cannot be done yet. You can request an API proxy from your own backend or use jsonp. Here is a library with syntax like fetch https://github.com/camsong/fetch-jsonp . Usage example 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); });
source to share