That API Guy's - API Forum

Access blocked by CORS

Hi,

I am making a simple GET request to “https://thecatapi.com/api/images/get?format=xml&results_per_page=1” from a web application and would like to consume the response data. (More specifically, using the $http.get provided by vue-resource) However, I am receiving the following CORS-related error messages

In Chrome:
Access to XMLHttpRequest from origin ‘localhost : 8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

In Firefox:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

According to Firefox:

“Reason: CORS header ‘Access-Control-Allow-Origin’ missing”

If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header’s value.

For example, to allow a site at to access the resource using CORS, the header should be:

Access-Control-Allow-Origin: <trusted site>

You can also configure a site to allow any site to access it by using the * wildcard.

So I’m not sure if this is something that needs to be added to the server-side response header or if I’m not doing something right.

Any insight appreciated. Thanks in advance!

I was able to get it by using a cors-anywhere proxy and setting ‘X-Requested-With’: true in the request header:

this.$http.get(“https://cors-anywhere.herokuapp.com/https://thecatapi.com/api/images/get?format=xml&results_per_page=1",{"Content-Type”: “application/json”,‘X-Requested-With’: true})

If there is a more direct way, please let me know. Thanks!

That’s very weird. I can confirm I can use the Fetch API, and XMLHttpRequest to retrieve that URL on a localhost domain, and that the result does contain the Access-Control-Allow-Origin: * header.

I’m not sure why you’d be seeing a different result. You should check out the documentation for vue-resource, and see if there’s anything special you need to do to allow CORS requests