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:
Network Flow
Let's understand what happens, when a cross-origin network call is made.
- Client side (Frontend) sends a
preflight
request to Server (Backend). - 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 attributeAccess-Control-Allow-Origin
with value of origin / origin pattern. - 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
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");
});
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:
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 ❤️
Top comments (0)