How to Fix CORS Errors in MERN (The Secure Way)

Source: Dev.to

Why is this happening?

It’s not a bug; it’s a feature.

Browsers have a built‑in security mechanism called the Same‑Origin Policy. Its job is to prevent malicious scripts on one webpage from obtaining access to sensitive data on another webpage.

In a typical local MERN stack setup:

• Your React frontend is running on http://localhost:3000
• Your Node/Express backend is running on http://localhost:5000

To the browser, these different ports make them completely separate origins. The browser doesn’t know that you own both of them. It sees a stranger trying to talk to your server, and it blocks the request to protect you.

The Fix: Whitelist Your Frontend

To fix this, we need to tell our Express server, “Hey, it’s okay. That frontend over on Port 3000 is with me.”
We do this using Cross‑Origin Resource Sharing (CORS) headers. The easiest way to manage this in Node.js is with the cors middleware package.

Step 1: Install the package

Navigate to your backend (server) folder in your terminal and run:

npm install cors

Step 2: Configure the server

Open your main server file (usually index.js or server.js). Import cors and use it before your routes are defined.

Here is the code:

const express = require('express');
const cors = require('cors');
const app = express();

// The Magic Lines 👇
app.use(cors({
  origin: 'http://localhost:3000', // Whitelist YOUR frontend only
  credentials: true // Required if you use cookies/sessions
}));

app.use(express.json());

// Your routes go here...
// app.use('/api/users', userRoutes);

app.listen(5000, () => {
  console.log('Server running on port 5000');
});

By setting the origin to http://localhost:3000, the server will now send the correct headers back to the browser, and the browser will allow the data through.

⚠️ The Critical Production Warning

When you are debugging late at night, you might find StackOverflow answers telling you to just use this:

// DANGER ZONE
app.use(cors());

While this does fix the error, it does so by allowing any website on the internet to make requests to your API. This is fine for a quick local test, but never push this to production. It opens a massive security hole.

In a production environment, always use an environment variable for your frontend URL to keep it secure:

app.use(cors({
  origin: process.env.FRONTEND_URL, // e.g., 'https://myapp.com'
}));

Summary

• CORS happens because your frontend and backend are on different ports/domains.
• Fix it by installing cors on your backend and configuring it to whitelist your specific frontend origin.
• Never use a permissive app.use(cors()) in production; always restrict the allowed origin.