How to fix "blocked by CORS policy"

What the error means

You will usually see something like this in the browser console:

Access to fetch at 'https://api.example.com/orders' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS stands for Cross-Origin Resource Sharing. When a page on one address (the origin, here http://localhost:5173) asks for data from a different address, the browser checks whether the server allows it. If the server's reply doesn't include permission, the browser hides the reply from your code.

Why it works in Postman but not the browser

CORS is a browser rule. Postman, curl and server code don't check it, so the same request works there. That is the clue that your request is fine and the fix belongs on the server.

The fix: allow your origin on the server

The server needs to send this header with its replies:

Access-Control-Allow-Origin: http://localhost:5173

In a Node.js server using Express and the cors package, that is one line:

app.use(cors({ origin: 'http://localhost:5173' }))

Use your real site's address in production, for example https://yourapp.com.

If your request sends JSON or a login token

The browser first sends a quick OPTIONS request, called a preflight, to ask permission. The server must answer it with the methods and headers it allows:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

If you send cookies

With credentials: 'include', the server must name your exact origin (not *) and also send Access-Control-Allow-Credentials: true.

A quick fix while you develop

If you can't change the server yet, let your dev server pass requests through. In Vite, add a proxy and call /api/orders instead of the full address:

server: { proxy: { '/api': 'http://localhost:3000' } }

Avoid browser extensions that switch CORS off. They hide the problem on your machine, and it comes back for everyone else.

Checklist

• The header names the exact origin in the error, including http or https and the port.
• The server answers OPTIONS requests, not just GET and POST.
• Error replies (like 401 or 500) send the header too, or you'll see a CORS error instead of the real one.
• Cookies need an exact origin plus Access-Control-Allow-Credentials: true.

Get the answer for your own screen

Every setup is a little different. With Mini NOVA open on Windows, press Insert while the error is on screen and ask "why is this blocked?". It sees the error and the origin on your screen and tells you the next step for your setup. Free for 7 days or 100 questions.