Stop 16 · Security Across the StackTopics · 3/7

CORS Configuration

Part of the Full Stack Developer Roadmap

In short

"Blocked by CORS policy" is the error every full-stack beginner meets. It's not your API failing; it's the browser asking your server for permission, and your server not answering.

Properly configuring which origins your API allows — too permissive is a security smell, too strict breaks your own legitimate frontend.

The blob at a velvet rope unhooks it for one visitor while checking a guest list clipboard.

Think of it like this

The guest list at the entrance

At a private party, the person at the rope checks a guest list before letting anyone in. The list is decided by the host, not the guest. With CORS, your server is the host and tells the browser which websites may read its responses.

Watch it happen

A preflight from shop.in to api.shop.in

Browser

API

OPTIONS /orders

1/5The page on shop.in wants to POST JSON to api.shop.in. Different origin, so the browser asks permission first.

The big ideas

What you need to know

Origin = scheme + host + port

http://localhost:5173 and http://localhost:3000 are different origins, which is why your dev setup hits CORS.

Browsers enforce it

CORS is a browser rule. curl, Postman and other servers ignore it completely.

Preflight for non-simple requests

JSON bodies, PUT, DELETE or custom headers trigger an OPTIONS request first. Your server must answer it.

Cookies need extra care

To send cookies cross-origin you need credentials: true on both sides, and the origin can't be the * wildcard.

See it in code

Walk through the code

1import cors from "cors";2 3const allowed = ["https://shop.in", "http://localhost:5173"];4 5app.use(cors({ origin: allowed, credentials: true }));

1/2List exactly which frontends may read responses: production and your local Vite dev server.

The cors package answers preflights and echoes back the matching origin. Keep the list explicit; reflecting any origin with credentials is a real hole.

Save yourself the pain

Common mistakes

Oops

Thinking CORS protects your API from attackers.

Do this instead

It only controls which browser pages can read responses. Anyone can still call the API directly, so you still need auth.

Oops

Using origin: "*" with cookie-based login.

Do this instead

Browsers reject * with credentials. List your real frontend origins instead.

Your mission

Trigger and fix a CORS error

~20 min

Quick check

Your API works in Postman but the React app gets a CORS error. What's going on?

Go deeper

1Configure CORS to allow only your actual frontend's origin(s), not a wildcard.
2Test that both your local and production frontend origins work correctly.
3Confirm a request from an unrelated origin is correctly blocked.