What is an origin

An origin is the combination of a URL’s scheme, host, and port. All three parts must match.

The browser needs a unit of isolation — a rule deciding which pages belong to the same “site” and may touch each other’s data, and which must be kept apart. The origin is that unit. Browsers use this boundary for DOM access, network response access, and storage.

For this URL:

https://shop.example.com:8443/account?tab=orders

the origin is:

https://shop.example.com:8443

The path, query string, and fragment do not participate. These pages therefore share an origin:

https://example.com/account
https://example.com/shop

These do not:

http://example.com
https://example.com
https://app.example.com
https://example.com:8443

Each line fails a different part of the test. The first differs from the second in scheme. The third changes the host — a subdomain counts as a completely different host. The fourth changes the port.

One wrinkle about ports: when a URL omits the port, the scheme’s default applies. https://example.com and https://example.com:443 are the same origin, because 443 is the default for https. Writing the default explicitly changes nothing; writing any other number creates a new origin.

Check an origin yourself

Open the Console on any page and run:

location.origin

You can also compute the origin of any URL without visiting it:

new URL('https://shop.example.com:8443/account?tab=orders').origin
// 'https://shop.example.com:8443'

The mistake to avoid

The common error is grouping URLs by domain name instead of origin. A subdomain is not automatically trusted merely because it belongs to the same parent domain: api.example.com and example.com are different origins, full stop. Developers assume “it’s all our domain, it will work”, and then the first cross-origin request or iframe access fails.

When that happens, compare the two origins with location.origin or new URL(...).origin and check the three parts one by one. Asking “do scheme, host, and port match?” is the first step in explaining many CORS and cross-window errors — the following lessons build directly on this definition.