CORS or Cross-Origin Resource Sharing is the mechanism that allows websites from different origins or different URLs to communicate or share resources with each other.

If you have been doing development for some time or if you ever tried to communicate to an API, it's very likely that you have seen this error :

This is because the browsers follow the same-origin policy(SOP) in their security models which allows resource sharing from servers that are located on the same URLs. SOP allows an origin to send the request to other origins but doesn't allow access to the response. So, how this all works? Let us dig deep. Whenever you make a request, your browser adds an origin header to the Request.

origin: http://localhost:5000

If that request goes to the server on the same origin, then the browser allows it. However, if the origin is not the same, it is called a cross-origin request. In this case, the server adds the Access-Control-Allow-Origin to the response message and it needs to match with the origin.

access-control-allow-origin: http://localhost:5000

It can also have a "*" wildcard which means all the origins are allowed or a comma-separated list of origins.

Browser checks if the origin is present in access-control-allow-origin and then permits access to the response data.

When we talk about CORS, preflight is something that has to be addressed.

PREFLIGHTS

Preflights is the request which is made before the actual request, with the method OPTION to check if the server is aware of the request methods and headers. All the request doesn't trigger preflight like GET, POST and HEAD. These requests are called simple requests. In the case of other requests and if the request headers of GET, POST and HEAD are modified, the browser issues a preflight request.

For example, if you make a request which makes the browser issue a preflight request, the browser issue a preflight request with method OPTION and following headers to the server.

origin: http://www.localhost:5000
access-control-request-method: any method (ex. DELETE)
access-control-request-headers: any custom header (ex. Authorization)

The server responds to this as:

access-control-allow-methods: POST, GET, PUT, DELETE, OPTIONS
access-control-allow-origin: http://www.localhost:5000
access-control-allow-headers: authorization (list of allowed headers)

Here, access-control-allow-methods is the list of methods that the server responds to. Access-control-allow-origin is the origin. access-control-allow-headers is the list of headers that the server permits. If the request made by the client doesn't match any of these parameters then the request is not made at all.

HOW TO SOLVE THE ISSUE:

The simplest way is to add CORS support to your server. This can be done easily with the help of a package that you can install depending upon the framework you are using to build the backend. Another way is by using the proxy.

So that's all for CORS. I hope this blog was able to add some value. I will be writing on more such topics related to the Web. Till then, Cheers!