What's actually going on with CORS, under the hood

CORS is one of those things every web developer runs into sooner or later. Most of us know how to fix it — add a header, change a config, ask the backend person to "do something about CORS." But how many of us actually understand what the browser is doing in the background, and why it's doing it?

Let's go through it today, slowly, with a simple example.

What's an "origin"?

Before we get into CORS, there's one word we need to pin down: origin. An origin is three things put together — the scheme, the host, and the port of a URL.

So https://example.com and http://example.com are different origins because the scheme is different (https vs http). https://example.com and https://api.example.com are different because the host is different. And https://example.com and https://example.com:8080 are different because the port is different. If any one of those three pieces changes, the browser treats it as a separate origin.