What Is CORS and Why Does It Block Requests?

What CORS Actually Means

CORS stands for Cross-Origin Resource Sharing. That sounds like computer jargon, so let's break it down. An "origin" is just a website's address — like myapp.com. When a webpage from one address tries to grab something from another address — like data from an API, a font, or an image — that's a "cross-origin" request.

The problem is that bad actors could exploit this. Imagine a malicious website silently asking your bank for your account details, or a sketchy page pulling private info from your email. Without rules, the browser has no way to stop it.

CORS is the browser's built-in bouncer. It checks whether the other website actually said "it's okay for this page to talk to me." If it didn't, the browser blocks the request and shows you an error in the console. No data gets through.

Why Browsers Care About This

You might be wondering — why can't websites just talk to each other freely? The answer is security. The browser is keeping your other tabs safe. When you're logged into your bank in one tab, a sneaky ad in another tab shouldn't be able to ask your bank for your personal data. CORS prevents that.

But here's the thing that trips up a lot of developers: CORS also blocks perfectly legitimate requests. If you build a frontend that runs on localhost:3000 and your API lives on api.yoursite.com, the browser sees two different origins and blocks the request — even though you're the one who built both of them. This is the #1 reason developers see mysterious errors when connecting a React app to a Node backend.

The Browser's Bouncer Checklist

When your browser wants data from another origin, it follows a short checklist. Here's what happens step by step:

The key part is the Access-Control-Allow-Origin header. That's what the server sends back to say who's allowed to grab its data. If your page's origin isn't on the list, the browser blocks the data — even if the server tried to send it.

For simple requests (like GET requests), the browser just sends the request and checks the response headers. For more complex requests (like sending JSON data with POST), the browser first sends a "preflight" request — a quick check asking "is it okay if I send this?" The server answers yes or no, and only then does the real request go through.

Fixing CORS on Your API

Say you have a Node/Express API and a frontend on a different origin. Here's how you tell your server to allow your frontend:

// Enable CORS for all requests
const cors = require('cors');

const app = express();

// Tell your server which frontend is allowed to talk to it
app.use(cors({
  origin: 'http://localhost:3000'
}));

app.post('/api/generate', (req, res) => {
  // Your AI endpoint here
  res.json({ result: "AI response here" });
});

app.listen(4000, () => console.log('Server running on :4000'));

This tells the server to add the right headers to every response it sends. Now your browser will see the permission and let the data through. You can also use cors({ origin: '*' }) to allow any origin during development — but never do that in production.

Knowledge Check

Test what you learned with this quick quiz.