What is CORS? A Simple Guide to Understanding Its Importance

CORS stands for “ Cross Origin Resource Sharing “ and it is a security mechanism implemented by the web browser to control how resource ( API’s , stylesheet, font etc ) are shared between different origin . In this blog we will discuss about what is Origin , why CORS and why we need it , How does the CORS works :

What is an Origin ?

An Origin here is defined by :

- A protocol : such as http or https

- A host (domain) : example.com

- A port : :3000 , :8000

Two Origin are not same until all of the 3 properties of the origin are not same

Why CORS and why we need it

To understand what CORS is we need to understand why does we need CORS . Well the CORS is developed as a browser security feature that prevent unauthorized request to resource hosted on different Origin and enables safe , controlled resource sharing between web application hosted on different domain while still following the “same origin policy”

By default browser follows the “same-origin policy” which means a webpage can request resources only from the domain it is served (hosted) at and restrict making request to any other domain than it own

eg: suppose the webpage is served (hosted) at http://example.com then it can request resource from http://example.com/api but cannot request resource from http://exa.example.com

Well it is important as it stop malicious website from making unauthorized request to other domain users and here where the CORS functionality come in as it provided a way / mechanism that allows us to make cross-origin (request resources from different domain/origin other than the one at which webpage is served at ) requests in a more controlled and secured way . To make cross-origin request we need to specify which origin are permitted to access their resources

In backend we set up the cors origin as :

app.use(cors({ origin: “http://example.com” , credentials: true })

here we can also do origin as * which mean allow access from any domain / origin

app.use(cors({ origin: * , credentials: false })

remember you can only use * when you don’t need credentials

How does the CORS works ?

When a browser detects a cross origin request , it follow these steps :

1. The Browser send a request with an Origin header to the server

2. The server decide whether to allow or reject the request based on the CORS setting

3. If allowed the server Responds with the CORS header

For eg:

the frontend make a request from “http://frontend.com“ to a different origin such as “http://api.backend.com” and here the browser add the origin header to the request i.e

GET /data HTTP/1.1

Host: api.backend.com

Origin: https://frontend.com // origin header

Here in second step the backend check either the Origin is allowed based on the CORS setting i.e it check if “

app.use(cors({ origin: “http://frontend.com”}))

If the origin is allowed then the backend generally responds with the CORS header

HTTP/1.1 200 OK

Access-Control-Allow-Origin:

https://frontend.com Content-Type: application/json

And if the origin is not allowed the browser blocks the request and logs the error

Few Imp!

1. CORS is imposed by the browser not the server

2. We can’t bypass CORS from the frontend

3. There are three type of CORS request Simple request , Preflight request , Request with credentials