How CORS Broke My React App (And How I Fixed It Step by Step)

When I started building a React frontend with a separate backend, everything looked fine at first. The UI loaded correctly, components rendered, and routing worked. But the moment I tried to connect my frontend to the backend API, I hit a wall.

The browser blocked my request.

This article is a real developer experience, written step by step, explaining what went wrong, why it happened, and how I solved it. If you are new to React full-stack development, this will likely save you hours.

---

Step 1: Setting Up the Project

My setup was simple and common:

• React frontend running on
  
  http://localhost:3000

• Backend API running on
  
  http://localhost:5000

I created an API endpoint and tried to fetch data from React using fetch().

fetch("http://localhost:5000/api/data")

At this point, I expected JSON data.

Instead, I got an error.

Step 2: The Error That Confused Me

The browser console showed something like this:

Access to fetch at 'http://localhost:5000/api/data'
from origin 'http://localhost:3000'
has been blocked by CORS policy

At first, I thought:

• My API was broken
• My React code was wrong
• Something was wrong with fetch

But none of that was true.

Step 3: Understanding What CORS Actually Is

I learned that CORS means Cross-Origin Resource Sharing.

An origin is made of:

• protocol
• domain
• port

So even though both frontend and backend were on localhost, the ports were different, which made them different origins.

The key realization:

This is not a React error.
This is not a backend bug.
This is a browser security rule.

The browser blocks requests unless the backend explicitly allows them.

Step 4: Why My API Worked Everywhere Except React

This part was frustrating.

• The API worked in Postman
• The API worked when opened directly in the browser

• The API failed only in React
  That is when I understood something important:

• CORS is enforced by browsers only.

• Tools like Postman ignore CORS.

So my backend was fine, but my backend was not telling the browser that React was allowed to access it.

Step 5: Fixing CORS in the Backend

My backend was built with Express.
**
I added the CORS middleware:**

import cors from "cors";

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

After restarting the backend, I refreshed the React app.

The error was gone.

The data loaded successfully.

Step 6: A Simpler Fix for Development (Proxy)

Later, I learned an easier development-only solution.

Inside package.json of my React app:

{
  "proxy": "http://localhost:5000"
}

Then I changed my API call to:

fetch("/api/data")

React now forwarded the request internally, and the browser no longer complained about CORS.

This approach is great for development, but not for production.

Step 7: Lessons I Learned the Hard Way

• CORS is not an error, it is a protection mechanism
• React did nothing wrong
• Backend must explicitly allow frontend access
• Different ports still mean different origins
• Never disable CORS blindly in production

Understanding this changed how I debug frontend-backend issues.

Final Thoughts

CORS is one of those problems every React developer faces at least once. It feels blocking at first, but once you understand why it exists and how it works, fixing it becomes straightforward.

Learning development is a lot like building habits in real life. Paying attention to details early saves trouble later. I often think of that mindset when reading thoughtful lifestyle content as well, such as the curated guides available on Lavish Beauty Corner
, where clarity and intentional choices matter just as much as they do in clean code.

If you are building a React app and your frontend cannot talk to your backend, check CORS first. It is usually the missing piece.