Cross-Origin Resource Sharing (CORS)
The behavior you are observing is the effect of browsers' CORS implementation.
Before CORS became standardized there was no way to call an API endpoint under a different domain for security reasons. This was (and to some degree still is) blocked by the Same-Origin Policy.
CORS is a mechanism that aims to allow requests made on behalf of you and at the same time block some requests made by rogue JS and is triggered whenever you are making an HTTP request to:
Access-Control-Allow-What?
CORS uses a few HTTP headers — both in request and response — but the ones you must understand in order to be able to continue working are:
Access-Control-Allow-Origin
This header is meant to be returned by the server, and indicates what client domains are allowed to access its resources. The value can be:
-
*— allow any domain - a fully qualified domain name
If you require the client to pass authentication headers (e.g. cookies) the
value can not be * — it must be a fully qualified domain!
Access-Control-Allow-Credentials
This header is only required to be present in the response if your server
supports authentication via cookies. The only valid value for this case
is true.
Access-Control-Allow-Headers
Provides a comma-separated list of request header values the server is willing
to support. If you use custom headers (eg. x-authentication-token you need to return it in this ACA header response to OPTIONS call, otherwise, the request will be blocked.
Access-Control-Expose-Headers
Similarly, this response should contain a list of headers that will be present in the actual response to the call and should be made available to the client. All other headers will be restricted.
Access-Control-Allow-Methods
A comma-separated list of HTTP request type verbs (eg. GET, POST) which the server is willing to support.
Origin
This header is part of the request that the client is making, and will contain the domain from which the application is started. For security reasons browsers will not allow you to overwrite this value.
How to fix the CORS “error”?
You have to understand that the CORS behavior is not an error — it’s a mechanism that’s working as expected in order to protect your users, you, or the site you’re calling.
Sometimes the lack of proper headers is the result of wrong client-side implementation (eg. missing authorization data such as API key).
Enjoyed this post? Never miss out on future posts
