Web & APIs

CORS · Cross-Origin Resource Sharing

/ korz /

CORS is the browser rule that stops a web page from quietly calling a different website's API unless that other site has explicitly said 'yes, you're allowed.' Your page is from one origin (say myapp.com); the API lives at another (api.bank.com); by default the browser slams the door between them. CORS is the polite handshake that opens it.

It exists for a good reason. Without it, any sketchy site you happened to visit could fire off requests to your bank, your email, your everything — riding on the login cookies already sitting in your browser. So the browser enforces a default of 'a page may only freely talk to its own origin,' and a server has to opt in by sending back a header (Access-Control-Allow-Origin) that names who's welcome.

Here's the part that trips up every beginner: a 'CORS error' is not a bug in your code and not really an error from the server — it's the browser refusing to hand you a response the server already sent, because the server forgot to include the permission header. The fix lives on the API server (add the header), not in your frontend. Once you know that, those red console messages stop being scary.

# The server opts in by naming who's allowed:
Access-Control-Allow-Origin: https://myapp.com

# Without this header, the browser blocks your page from reading the reply.

One header on the API server is usually the whole fix for a 'CORS error'.

A CORS error is the browser's veto, not the server's. The fix lives on the API, not your frontend.

Also called
cross-origin resource sharingcors errorcross-originsame-origin policyaccess-control-allow-origin