What are CORS? and how to configure it in Node?
Tags: cors, node, backenddevelopment, javascript
Published: 2024-05-13 21:35:21

{% youtube y2HNjC2et5E %}

CORS, Cross-origin resource sharing, is a policy implemented by the browsers. 


### Origin
First, let's understand what is origin. Origin is made up of the `base url` and the `port`. So `https://abc.com`, `https://abc.com:4040` and `https://cba.com` are different origins. Note that when we do not provide a port number with `<url>:<port>`, the default port for `https` is `443` and for `http`, its `80`. Hence, in the above example of `https://abc.com`, we have a port of `443` by default.

### Cross origin
Cross origin simply means that one origin is trying to connect to another origin.


### Cross origin resource sharing
For developing web applications, there are several architecture. 

One of the ways to develop web application is to have the `Frontend` and `Backend` at the `same origin`, for example a NextJs Application, which is responsible for both, Frontend and Backend. In this case, whenever Frontend makes a network request to Backend, it requests on the `same origin`. And hence no CORS policy is implemented by browsers.

Other way to develop web application is to have `Frontend` and `Backend` at different origins. Let's say we got Frontend, React Application, at port `5173`, vite default port. And Backend, Node application, at port `3000`. In this case, we got different origins. And hence whenever a network request is made from React app to Node app, browser will implement CORS policy and possibly throwing an error:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36v6yhfatc0yhon0c63b.png)


### Network Flow
Let's understand what happens, when a cross-origin network call is made.
1. Client side (Frontend) sends a `preflight` request to Server (Backend). 
2. Server responds with whether the Client side's origin is allowed to request the Server or not. If server allows such origin, the `response headers` have the attribute `Access-Control-Allow-Origin` with value of origin / origin pattern.
3. Browser check the response headers and verify if its origin matches the origin pattern against the attribute of `Access-Control-Allow-Origin`. 
     a. If it does matches, browser re-request the server with 
        the actual payload and executes the required network 
        call.
     b. If it does not matches, browser throws an error.


### Configuring backend to support CORS
Now we know that to configure CORS, we only need to modify our `response headers` to have the attribute of `Access-Control-Allow-Origin` which matches the origin pattern of the client.

One way of configuring CORS, is by simply using the package, `cors` and use the middleware provided by cors
```js
const express = require("express");
const cors = require("cors");

const app = express();

app.use(cors({ origin: "http://localhost:5173" }));

app.get("/", (req, res) => {
  res.send("Hello World");
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulue6emmc1juhzqb25pq.png)




Now we got everything working, but there is another way of configuring response header, that is without using any package. 

We simply need to define our custom middleware that modifies the response object. Here is how we can achieve it: 
```js
const express = require("express");

const app = express();

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://localhost:5173");
  next();
});

app.get("/", (req, res) => {
  res.send("Hello World");
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

```

**Note**: After the changes, you might not see the expected results, try using incognito or clear site cache.

That's all folks.
Happy coding ❤️