CORS - “Oh My!”

As web developers, After “Cannot read properties of undefined” error, The CORS error is something everyone would have faced. And everyone will run to stack overflow or in the current era, to ChatGPT for a solution without even trying to understand what the heck does that mean (Self tag!). So in this article we will find out what CORS is and how to fix that error without googling!

Let’s take a React app for this example. When you start a react dev server and open it in your browser, the browser sends a GET request to your dev server (lets say localhost:3000) to get the index.html file which will be rendered. If you make another request to the same localhost:3000 in your app, the browser won’t complain about it because it is called as “SAME ORIGIN” request. Here, localhost:3000 is called the origin. If your app tries to request to any other server with different origin (lets say localhost:8080), this is called as “CROSS ORIGIN” request.

Introducing CORS

CORS stands for Cross Origin Resource Sharing. The mechanism depends on the “HTTP HEADERS” heavily. By default, Browsers enforce same-origin policy, preventing websites from accessing resources from different domains for security reason. CORS acts as a controlled exception, allowing specific origin if needed, for example Microservice architecture.

Whenever a browser is sending a request to any server, It attaches a request header called Origin with it which will contain the origin of the request (for example localhost:3000). The Server will respond with a header called Access-Control-Allow-Origin which contains the origin that is allowed by the server. Now the browser will compare these 2 headers and will allow if the origin is allowed. Else, the infamous CORS error is thrown.

Fixing the CORS error

You can’t do anything much if the server is not in your control to avoid the CORS issue. But if you have control over your server which is running in the other origin, then fixing the error is easy. For instance, if your backend is written in express.js, then you can do the following.

1. Install this dependency

npm install cors

1. Import the CORS dependency

const cors = require("cors") // common js

import cors from "cors" // ES Modules

1. Add this as a middleware

app.use(cors({ origin: '<your origin here>' }))

And that’s it, now your frontend can communicate with your backend without any issues.

You can also use a wildcard * for the allowed origins, which will allow any request to hit the server. This can introduce security vulnerabilities so use this wildcard cautiously!

How secure is CORS?

As I said, CORS provides controlled access to cross origin resources. Browsers push the same-origin policy and have CORS as an exception for the users to make sure their sensitive data is not breached to external threats.

Similarly it also allows server to have granular control by specifying origins, methods (GET, POST, etc.) and headers which are allowed. This fine-grained control helps limiting potential attackers. This also prevents from malicious attacks like Cross-Site scripting (XSS) and Cross-Site Request Forgery (CSRF).

CORS primarily handles the browser’s behavior, so it is not a replacement for the server side security measures like authentication, authorization, etc., whose implementation is crucial.

Conclusion

To summarize, CORS mechanism is used by the browser to prevent requesting different origin under a controlled exception. To allow the origin, in the server, the origin should be configured. CORS ensures cross-origin secure communication but it is not any replacement for server side security practices. I will post another follow up article on the Preflight request used by CORS mechanism, Until then!