Let’s start with its full form first;

CORS stands for Cross-Origin Resource Sharing

What does MDN say about CORS?

It's an HTTP header-based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own, from which a browser should permit loading resources.

Now, let's take a step back and see what used to happen when the CORS mechanism was not standardized.

Previously, browsers did not allow any resource sharing (network calls) between different domains (origins), not only domains, it did not even allow resource sharing from sub-domains, and different ports of the same domain as well.

You see how many problems this would create in today’s world, especially with micro-services architecture and cross-app compatibility.

If we would allow resource sharing from different origins, then it would create a lot of chaos and a huge security issue for all origins on the web.

That is the main reason why CORS was standardized to have control over resource sharing.

Now, let's understand the mechanism by which we share the resource

If 2 origins want to share resources, let's say akshayraichur[.]com wants to POST data on the server (example[.]com)

Before making this network call (XMLHTTP Request / Fetch API / REST API call) browsers send a preflight request to the same endpoint with a different HTTP method (options method) to verify from the server if akshayraichur[.]com is allowed to make a POST call or not.

In order to verify (at the server’s end) the above call, the server sets additional HTTP headers to the preflight request which will let the browser know if the call is safe to make or not. If it’s safe to make a call then the browser will allow the actual POST call for the server. If it's not safe then it will throw an error on the browser and we all call it "The CORS error"

Let’s look at what are those few HTTP headers that are set by servers

Accept-Control-Allow-Origin:

This header is the main response header by which the browser verifies if the network call is safe or not. The server sends this header.

Example:

Accept-Control-Allow-Origin: *

In the case of public APIs, we want them to be accessed by anyone and everyone.

Accept-Control-Allow-Origin: https://akshayraichur.com

Only the above domain can share resources with the server.

Accept-Control-Allow-Methods:

This header tells us which all HTTP methods are safe to make from the browser's end.

Example:

Accept-Control-Allow-Methods: PUT, POST, GET, OPTIONS

Only the above HTTP Methods will be allowed from browsers

Access-Control-Allow-Headers:

This header tells us which headers can be used with the network call

Example:

Access-Control-Allow-Headers: *
Access-Control-Allow-Headers: X-Custom-Header

Here, * is a wildcard representing all headers and X-Custom-Header is a user-defined header.

There are still many HTTP headers that servers set.

I will attach a link to articles that you can go through to read in dept about it. MDN Article Link

I am also attaching an image that illustrates the above explanation Illustration Credits

That’s it, Folks!

If you like my content, please consider following me on Linkedin, GitHub