the Difference Between Site and Origin

🌐 Understanding the Difference Between Site and Origin

Before diving into topics like CORS, the Access-Control-Allow-Origin header, the credentials option in the Fetch API, or even Cookie behavior, it's important to understand two fundamental concepts:

• Site
• Origin

Many of the errors developers encounter when communicating between the Front-end and Back-end are directly related to these two concepts.

Once you understand the difference between them, browser behavior regarding Cross-Origin and Cross-Site requests becomes much easier to understand.

🌍 Let's Start with Domain and Subdomain

Every website is identified by a Domain.

For example:

example.com

This is a Domain.

If you place another label before the Domain, it becomes a Subdomain.

For example:

api.example.com

In this example:

• example.com → Domain
• api → Subdomain

Here are a few more examples:

mail.google.com

• google.com → Domain
• mail → Subdomain

blog.example.com

• example.com → Domain
• blog → Subdomain

shop.example.com

• example.com → Domain
• shop → Subdomain

Each Subdomain can host an entirely different service, application, or API—even on a different server or port.

📌 What is an Origin?

An Origin consists of three components:

• Scheme (Protocol)
• Host
• Port

For example:

https://api.example.com:443

Here:

• Scheme → https
• Host → api.example.com
• Port → 443

When determining whether two URLs share the same Origin, the browser compares all three components.

If any one of them changes, the Origin changes.

For example:

https://example.com

and

http://example.com

These are different Origins because the Scheme is different.

Another example:

https://example.com

and

https://api.example.com

These are different Origins because the Host is different.

And finally:

https://example.com

and

https://example.com:8080

These are different Origins because the Port is different.

🌐 What is a Site?

Unlike Origin, a Site is less strict.

A Site consists of:

• Scheme (Protocol)
• Registrable Domain (eTLD+1)

The Registrable Domain is the main domain that can actually be registered.

For example:

api.example.com

and

blog.example.com

Both belong to the same Registrable Domain:

example.com

Therefore, they are considered Same-Site.

However:

example.com

and

example.org

are Cross-Site because the Registrable Domain is different.

Also remember that the Scheme is part of the Site comparison.

For example:

http://example.com

and

https://example.com

are considered different Sites in modern browsers (Schemeful Same-Site).

⚖️ Site vs Origin

In summary:

Origin compares:

• Scheme
• Host
• Port

Site compares:

• Scheme
• Registrable Domain

Because of this, two URLs can be:

• ✅ Same-Site
• ❌ Different-Origin

For example:

https://api.example.com

and

https://blog.example.com

Result:

• ✅ Same-Site
• ❌ Different-Origin

Another example:

https://example.com

and

https://example.com:8080

Result:

• ✅ Same-Site
• ❌ Different-Origin

📌 Why Does This Matter?

Browsers rely on these concepts to enforce several important security mechanisms, including:

• Same-Origin Policy (SOP)
• CORS
• Access-Control-Allow-Origin
• Fetch API credentials
• Cookie SameSite

Understanding the difference between Site and Origin makes it much easier to understand why browsers allow or block certain requests.

In the next article, we'll explore Same-Origin Policy (SOP) and CORS, and see exactly how browsers decide whether a cross-origin request should be accessible to JavaScript.