CORS(Complete-Guide)

By default, browser follow same origin policy and it blocks all cross-origin communications. example if user is browsing on https://abc.com and wanted to load resources from https://xyz.com by default it is not allowed. This is browser’s same origin policy.

Cross Origin Resource sharing or CORS is http header-based mechanism to communicate with different origins.

An origin is made up of PROTOCOL : DNS :PORT

If the protocol differs, the origin is considered different. If the DNS is different, the origin is also different. Similarly, if the port varies, the origin is regarded as different. Example
o http://abc.io & https://xyz.io are different origin.
o http://localhost:5000 and http://localhost:3000 are different origin.

Access-Control-Allow-Origin : if you set Access-Control-Allow-Origin header as * all cross-origin communication is possible. But this is not recommended because of security reasons. Better to declare only origins which should be allowed to communicate in place of *. Example if a user is browsing on https://abc.com and wanted to load resources from https://xyz.com to enable cross origin communication ,declare Access-Control-Allow-Origin : https://abc.com on the server of https://xyz.com.

Preflight request : Browser make an additional OPTIONS network call in case of PUT, DELTE, POST cross origin requests. This request is called preflight request.

Preflight request will have Access-Control-Request-Method header. Example if http://abc.com wants to update data on http:// xyz.com . The preflight request will have Access-Control-Request-Method : Put

Preflight response will have Access-Control-Allow-Methods header. It will have all the methods which are allowed.

By default, cookies are blocked on browser . to make it work we need to set Access-Control-Allow-Credentials as true in response header.