What is CORS?

CORS (Cross-Origin Resource Sharing) is a browser security feature that controls which websites are allowed to make requests to a different domain than the one serving the page.

Browsers block requests that go to a different origin by default. An “origin” is the combination of protocol, domain, and port, so https://myapp.com and https://api.myapp.com are considered different origins (even though they share the same base domain). This restriction exists to protect against cross-site request forgery (CSRF), where a malicious website tricks your browser into making requests to another site using your logged-in session. Without this protection, visiting a shady website could silently make requests to your bank, your email, or any other site you’re logged into.

The browser checks whether the server allows the request. The server communicates this through HTTP headers like Access-Control-Allow-Origin. If the server doesn’t include the right headers, the browser blocks the response and you get a CORS error.

CORS errors are extremely common when building web apps, especially when your front-end and back-end run on different domains or ports. The fix is always on the server side. You configure the server to send the right headers allowing the origins you trust.

I remember in the mid-2010s when CORS became widely enforced by browsers. Apps that had been working fine suddenly started throwing CORS errors. It was confusing at first because nothing in my code had changed. Once I understood that browsers had tightened the rules and the fix lived on the server, it clicked. Now it’s one of the first things I check when an API request isn’t going through.