fetch to different domain, it will be blocked by the browser due to same origin policy.
What is Same origin policy?
Same origin Policy is a mechanism which defines how a resource from one origin can interact with other origin. By default, browser allows to load the resource from the same origin. This is for the security purpose to reduce the possible attacks.
When you are making the AJAX request from abc.com to xyz.com. You must encounter the following error.
No 'Access-Control-Allow-Origin' header is present on the requested resource
This error is due to the Same Origin Policy of the browser. By using CORS, we can break the Same Origin Policy and use the resources from the different domain.
When you requested a resource from
xyz.com ,the browser automatically add
origin:abc.com header in the request and in response , it will check the
Access-Control-Allow-Origin:xyz.comheader to match the origin header. If the header value is different from the origin header, it will get blocked due to the same origin policy on the browser. Note — response is getting blocked, not the request.
Browser identifies which resources can be accessed by using the header
Access-Control-Allow-Origin. This header specifies which origin can access the resources.
To allow access from any origin —
To a specific origin —
CORS Request Types
There are two types of CORS request:
“preflight”requests. Browser will automatically figured out which request has to make to the server. Usually, we will see different kind of request in the network log.
If the requests meets the following, it’s considered as simple request.
- Request methods:
- Content Type of the following:
- CORS Safe headers
The above image shows the request and response in case of Simple Request.
In case of preflight requests, the browser will make automatic request using
OPTIONS method. This is used to determine the exact capabilities of the actual request. If the response of the request indicates that request can’t be made then the actual request to the server won’t be executed. The preflight options request is data less.
The preflight request sets couple of headers automatically, few important one’s are the following,
Access-Control-Request-Method — Actual method of the request.
Access-Control-Request-Headers — Custom headers that will be sent with the request.
The preflight response get following headers,
Access-Control-Allow-Origin — Origin allowed to make the request.
Access-Control-Allow-Methods — Comma separated HTTP Methods allowed to make the request.
Access-Control-Allow-Headers — Comma separated headers allowed to set in the request.
The response of the preflight request is examined by the browser to decide whether to continue with the actual request or discard it. Once the preflight request is successful, then it is treated as a simple request.
The above image shows the request and response in case of preflight request. Suppose the site abc.com wants to make a
Put Request to xyz.com,
- First the
OPTIONSrequest sent to the server,
- Based on the response header of the request
If it’s successful, actual
PUT method will be sent to the server.
If not, the request will be discard by the browser.
Sample preflight request
I hope you found this article useful. Any suggestions for improvements or feedback are very much appreciated.
Thanks for reading.