Understanding CORS

Understanding CORS

CORS or Cross Origin Resource Sharing is an http mechanism to let a user gain access to resources located on a domain other that the one the site lives on by using some additional headers. So for example lets say your app located on http://test1.domain.com needs to make a REST call to an api located on http://test2.domain.com/some/awesome/endpoint.

Now By default a browser wouldn’t allow such a request. This is done for http security reasons. What that means is a browser wouldn’t allow a request made from within a script on a webpage to access any HTTP resources located on a domain other than the one site was originally loaded from. For example both XMLHttpRequest and the Fetch API follow same-origin policy. Thats where CORS comes in. CORS facilitates this behavior by first validating test2.domain.com using some special headers

CORS

Headers

The headers that relate to CORS are :

Request Headers

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

Response Headers

• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

Functional Overview

The way CORS works is :

1. Browser encounters an resquest being made to test2.domain.com.
2. It examines if the request is GET or HEAD. If it is, it looks for any custom HTTP Headers. If it finds any, it moves on to step 3 otherwise it proceeds to make the actual request, i.e step 7.
3. Browser then makes an OPTIONS request test2.domain.com using following headers, Origin, Access-Control-Request-Method and Access-Control-Request Headers.
4. test2.domain.com must now respond with appropriate Access-Control headers.
5. If appropriate Access-Control- headers are not found in the response of the OPTIONS request, flow terminates with an error.