5xx or 4xx error with “No 'Access-Control-Allow-Origin' header is present”

Question

My browser is logging the following message in the devtools console:

No \'Access-Control-Allow-Origin\' header is present on the requested resource.…

Answer 1

An HTTP 5xx error indicates some failure on the server side. Or it can even indicate the server just isn’t responding at all — for example, a case might be, your backend tries to proxy a request to a server on another port, but the server is not even be up and listening on the expected port.

Similarly, a 4xx indicates some problem with the request prevented the server from handling it.

To confirm, you can try making the same request using a different client (curl, Postman, or whatever), and see if you get a 2xx success response for the request, rather than a 5xx or 4xx.

Regardless, if you see a 5xx or 4xx error on the client side, some message should get logged on the server side to indicate what failed and why. So to identify what triggered the 5xx/4xx error, start by looking at the server logs to find messages the server logged before it sent the error.

As far as CORS error messages go, it’s expected that in most cases when a 5xx or 4xx error occurs, servers won’t add the Access-Control-Allow-Origin response header to the response; instead the server most likely will only send that header for 2xx and 3xx (redirect) responses.

So if you get the cause of an 5xx/4xx error solved such that you can get a success response, you may find your CORS config is already working as expected and you’ve got nothing left to fix.

Answer 2

I had the same issue, the server doesn't support cross origin request. The API developer should change Access-Control-Allow-Origin to * (means from any origin).sometimes jsonp request will bypass, if its not working, google chrome provides plugins to change origin plugin