What is CORS? (or Cross Origin Resource Sharing)

If you are a REST API developer you should have heard of the term CORS by now. If not, you are not doing enough. :) Well, lets have a look at what CORS (or Cross Origin Resource Sharing) is. I have a little example on CORS, how to avoid the common error we get because of CORS and a few workarounds to implement CORS in applications.

A diagram describing the flow of a CORS request

Cross Origin Resource Sharing is something that is declared by the w3c on communication between different domains. By CORS, communications between the same domain will be allowed to users and the communications that are cross-originated will be restricted to a few techniques. We can see this when we are talking to APIs mostly. The REST call may give us an error. This is because the server and the client sides are on different domains and the communication between them are restricted by CORS rules.

An example for CORS can be written like this.

Example

Imagine there are two domains a and b. Then a wants to send a request to b. So by default, because of the CORS rules, a cannot do that unless b has been explicitly told to allow requests from a, or to allow requests from anyone.

Here, a and b can be two different domains having two different URLs. Also, they can even have two different ports in the same domain. Still the CORS restriction can be there for the two parties.

The common complain about CORS is that the REST calls work in the REST clients but they doesn’t work in the real application and gives an error. REST clients like Postman, Advanced REST Client doesn’t raise this error because they send some additional header information to bypass the issue. So our applications have to be configured to bypass the CORS restrictions when communicating.

Error raised in Angularjs saying that the necessary header information is not present

Solution

The workaround for the CORS problem comes in two ways.

1. Modify the request made to the server with additional headers. (This is usually done by browsers, REST clients, etc.)
2. Configure the server to accept requests by the specified domain or all domains. (Usually done by adding the header information ‘Access-Control-Allow-Origin = “*”’ in the server side.)

A correctly validated request will result in these specific details in the response.

Access-Control-Allow-Origin: http://www.yourdomain.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

Header names starting with ‘Access-Control-’ are the ones related to CORS.

This CORS implementation is sometimes a headache to the developer. But configuring it correctly removes it once and for all for a given application. The importance of the CORS implementation comes with the security aspects. It blocks the calls made by unknown domains and keeps the paths open only to the known domains. So the security is ensured despite the attacking requests. Currently browsers are involved in researches to integrate and extend the CORS support. Also most of the programming languages, frameworks support avoiding the CORS restriction by code.

So with the correct permissions the issue can be avoided. Less secured connections will be banned by the CORS rules. So there ends the introduction to CORS and the reasons of raising such a problem.

Here are some useful links related to CORS.

• Implementing CORS in Python Flask.
• Using CORS support in the server.
• There are a lot of questions asked on this particular area in Stackoverflow.

Thank you.