Cross Origin Resource Sharing (CORS)

CORS (Cross-Origin Resource Sharing) is a mechanism by which data or any other resource of a site could be shared intentionally to a third party website when there is a need. Generally, access to resources that are residing in a third party site is restricted by the browser clients for security purposes.

Client side code to make an HTTP Call would look like below,

function httpGetAction(urlLink)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", urlLink, false ); 
    xmlHttp.send();
    return xmlHttp.responseText;
}

This native JavaScript method is intended to make an HTTP call to the given link urlLink via the GET method and return the response text from the third party resource.

By default, a request to non-parent domains (domains other than the domain from which you are making the call) is blocked by the browser. If you try to do so, the console would throw the following error.,

Failed to load https://write.geeksforgeeks.org/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.google.com' is therefore not allowed access.

Of course, there are some cases where you need to access a third party website like getting a public image, making a non-state changing API Call or accessing other domain which you own yourself. There are some ways to achieve this, as and when necessary.

One could get an idea from the error message that the Access-Control-Allow-Origin Header is not present on the requested resource. It simply means that the target website whose resource you are trying to access haven’t specifically allowed you to get the resource from their site.

This could be done with an additional HTTP Header, Access-Control-Allow-Origin. This header could take the following values.,

• Access-Control-Allow-Origin : [origin]
  Example : Access-Control-Allow-Origin: https://write.geeksforgeeks.org
  This allows you to specifically allow one website to access your resource. In this case, https://write.geeksforgeeks.org can access your web resource, since it is explicitly allowed.
  This require an additional header called ORIGIN sent from the requesting client containing its hostname. This origin header is matched against the allowed origin and the access to the resource is decided.
• Access-Control-Allow-Origin : *
  Example : Access-Control-Allow-Origin: *
  Wildcard character (*) means that any site can access the resource you have it in your site and obviously its unsafe.

Based on the request methods (GET/PUT/POST/DELETE) and the request headers, the requests are classified into two categories.

1. Simple Requests
2. Non Simple/Complex Requests

Simple Requests
For Simple Requests, the CORS Works on the following way,

1. Request is made to a third party site with ORIGIN Header.
2. On the target site, the ORIGIN value is compared with the allowed origins.
3. If the source is an allowed one, then the resource is granted access, else denied.

Complex Requests
For Complex Requests, the CORS Works on the following way,

1. Before the actual request is sent, a pre-flight request is sent to the target site.
2. This pre-flight request is sent via the OPTIONS HTTP Request method.
3. Response to the pre-flight request would contain the Allowed methods, Allowed origin details about the target site.
4. After deciding whether the target site could return the requested information based on this response, the actual GET/POST request is sent by the browser.


Whenever there is a need to share the resources to a third party site, the site should be specifically whitelisted with Access-Control-Allow-Origin : https://sitename.com instead of wildcards as a security best practice.

References : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS