作为一名前端，肯定会接触到「同源」和「同站」这两个名词，比如：
- Ajax 请求会受到浏览器同源策略的制约
- Cookie 的 SameSite 属性表示该 Cookie 是否能被跨站发送
那究竟什么是同源（Same-Origin）、什么是同站（Same-Site）呢？在弄清楚这两个概念之前，必须先弄清楚「源」和「站」的区别：
源（Origin）
源（origin）= 协议（scheme）+ 主机名（hostname）+ 端口号（port）
假如网址是：
https://www.example.com:443/foo
复制代码
那么该网址的源就是：
https://www.example.com:443
复制代码
站（Site）
站（site）= eTLD+1
TLD 表示顶级域名，例如 .com、.org、.cn 等等，不过顶级域名并不是一成不变的，会随着时间推移增加，例如前段时间就增加了 .gay 顶级域名，可以说是广大同性交友爱好者的福音，目前所有顶级域名被收录到了顶级域名数据库里面。
TLD+1 表示顶级域名和它前面二级域名的组合，例如网址是：
https://www.example.com:443/foo
复制代码
那么：
-
TLD 是 .com -
TLD+1 是 example.com
但是，这种表示方式是有缺陷的，例如对于下面的网址：
https://www.example.com.cn
复制代码
如果按照上面的规则，它的 TLD+1 就是 com.cn，并不能表示这个站点，真正能表示这个站点的应该是 example.com.cn 才对，所以衍生出 eTLD 的概念，即有效顶级域名：
-
eTLD：com.cn -
eTLD+1：example.com.cn
eTLD 由 Mozilla 维护在公共后缀列表（Public Suffix List）中，而「站」的定义就是这里的 eTLD+1。
有了上面的解释之后，相信大家对「源」和「站」的概念都理解了，接下来就解释一下「同源」和「同站」的含义：
同源和同站
- 同源：协议（scheme）+ 主机名（hostname）+ 端口号（port） 完全一致。
- 同站：
eTLD+1 完全一致。
以 https://www.example.com:443 为例，下面给出了一系列的网址是否与其同源或同站的解释：
对比网址 | 是否同源 | 是否同站 |
https://**www.other.com**:443 | 否，因为 hostname 不同 | 否，因为 |
https://example.com:443 | 否，因为 hostname 不同 | **是，子域名不影响 ** |
https://login.example.com:443 | 否，因为 hostname 不同 | **是，子域名不影响 ** |
http://www.example.com:443 | 否，因为 scheme 不同 | **是，协议不影响 ** |
www.example.com:80 | 否，因为 port 不同 | **是，端口号不影响 ** |
www.example.com:443 | 是，完全匹配 | **是，完全匹配 ** |
www.example.com | 是，隐式完全匹配 (https端口号是443) | 是，端口号不影响 |
作者：乔珂力
