Access blocked by CORS

#1

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!

#2

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!

#3

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

1 Like
#4

@t3rminus is correct, all API methods should have fully open CORS headers on the response.

e.g. in the terminal:

curl https://api.thecatapi.com/api/images/get?format=xml -i

responds with headers

access-control-allow-origin: *
access-control-allow-methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept

There is an update going up this week, so I’ll add another layer of tests to ensure this is the case. Please let me know if you see any more instances of this issue.