- TechDailyFeed - Your Daily Dose of Tech News, AI, Programming, and More

The Issue While developing my CampusX project, I ran into a frustrating bug: ✅ Frontend (React) was calling the backend (Express). ❌ But I kept getting a CORS policy error in the browser console. What is CORS? CORS (Cross-Origin Resource Sharing) is a security feature in browsers that blocks requests from a different origin unless the server explicitly allows them. In my case: Frontend: http://localhost:3000 Backend: http://localhost:5000 The browser blocked the request because the backend didn't allow requests from the frontend’s origin. The Root Cause I hadn’t properly configured CORS middleware in my Express backend. const express = require("express"); const cors = require("cors"); const app = express(); // ❌ No CORS setup -> Browser blocks cross-origin requests app.use(express.json()); app.listen(5000, () => console.log("Server running on port 5000")); The Fix I installed the cors package and added this middleware: npm install cors Then, in server.js (or app.js), I added: app.use(cors({ origin: "http://localhost:3000", // Allow frontend requests credentials: true, // Allow cookies & authentication headers })); Now, my frontend could successfully communicate with the backend without CORS issues.

Mar 8, 2025 - 19:31

The Issue

While developing my CampusX project, I ran into a frustrating bug:

✅ Frontend (React) was calling the backend (Express).

❌ But I kept getting a CORS policy error in the browser console.

What is CORS?

CORS (Cross-Origin Resource Sharing) is a security feature in browsers that blocks requests from a different origin unless the server explicitly allows them.

In my case:

Frontend: http://localhost:3000
Backend: http://localhost:5000
The browser blocked the request because the backend didn't allow requests from the frontend’s origin.

The Root Cause

I hadn’t properly configured CORS middleware in my Express backend.

const express = require("express");
const cors = require("cors");

const app = express();

// ❌ No CORS setup -> Browser blocks cross-origin requests
app.use(express.json());

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

The Fix

I installed the cors package and added this middleware:
npm install cors

Then, in server.js (or app.js), I added:

app.use(cors({
    origin: "http://localhost:3000", // Allow frontend requests
    credentials: true, // Allow cookies & authentication headers
}));

Now, my frontend could successfully communicate with the backend without CORS issues.