Basic things you should know about CORS

We developer may face or encounter the CORS policy error at some point of time. So we search for error we copy paste the code as the solution suggest from Stack Overflow or other website and solve somehow.

What is CORS?

CORS is an abbreviation to Cross-Origin Resource Sharing. It manages the Cross-Origin Request i.e. request for the resources outside of the origin. CORS allow you to break the origin policy of the browser.

EXAMPLE:

Making API request from other site

Suppose, we go to yoursite.com and load the JavaScript/HTML/CSS file from yoursite.com. But when the JavaScript ran and request data from othersite.com. Perhaps othersite.com may have an API, so yoursite.com send a request to othersite.com. And in response it may receive a data from othersite.com.

By default, if we need any additional resources, they must have only come from yoursite.com. When our browser request othersite.com, its blocked by the browser so browser doesn’t let our data to propagate into the rest of application itself that is the policy of the browser. This policy exists because it is just like a security feature which doesn’t let our site for unauthorized access. It is just like a security entrance for the building.

WHY CORS?

CORS specify who can access its assets and also how the assets can be accessed. We can selectively let access to certain website to unblock from CORS policy. But by default it is blocked by the browser. Most servers allow GET requests but may block request to modify resources on the server i.e. PUT,POST,DELETE etc.

GET request example:

GET request to othersite.com

In above figure, we have two entities, browser and othersite.com. When we request GET method from yoursite.com, there may be 3 possibilities the othersite.com may send as a response to us.

1. Access-Control-Allow-Origin: yoursite.com : When this comes as response, now we can call get data from that site. It is just like it give entry or access to that site for GET request.
2. Access-Control-Allow-Origin: *: When this comes as a response, it give access to every GET request.
3. Access-Control-Allow-Origin:google.com :When this comes as a response, browser will blocked from propagating rest of the application.

When CORS is enabled, browser will always send send origin to server and expect a header i.e. Allow-Control-Allow-Origin is either same as the origin domain or *. Anything beside this will cause browser to block from propagating through the rest of the application.

POST,PUT,DELETE example:

Blocking GET doesn’t help on affecting the server, for other request method it works in a different way. If the server send after updating the data, it may affect the server so for beside GET request it works in differently.

POST/PUT/DELETE request diagram:

PUT request to othersite.com

Preflight request is a HTTP request with a method OPTIONS. So, if we are issuing PUT/POST/DELETE request , the first thing browser will send is OPTIONS request to the othersite.com. and as a response it sends Access-Control-Allow-Method:PUT. Now, we can send PUT/POST/DELETE any other method to the othersite, and update the server.

We can test on: test-cors

Here are few examples:

GET Request with CORS Enabled

GET Request to a server

Response with STATUS 200

PUT REQUEST WITHOUT ALLOW METHODS

PUT request to the server

Error on console

We can see status code 200 but without ACCESS-CONTROL-ALLOW-METHODS so it is blocked by browser and we cannot change anymore.

PUT REQUEST WITH ALLOW METHODS

PUT request to server

PUT request with allow methods

Now, by getting Access-Control-Allow-Methods: PUT we can now update/delete the server. and the gateway to change the server is open now.

You can try on: http://test-cors.org/

You can read more on: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Thank you! for reading.

Follow me on: @beevekmgrz