origin-host-referer
本文解釋了 HTTP 請求頭欄位中的 Origin、Host 和 Referer 的差異。Origin 主要用於跨域請求，由協議、域名和埠口組成。Host 由域名和埠口組成，用於伺服器識別不同服務。Referer 代表當前請求的來源頁面，移除掉 fragment 和使用者資訊。總結了三者的用途和區別。
重要要點：
- Origin 由協議、域名和埠口組成，主要用於跨域請求。
- Host 由域名和埠口組成，用於伺服器識別不同服務。
- Referer 代表當前請求的來源頁面，移除掉 fragment 和使用者資訊。
Origin
Origin 由三部分組成：
- scheme：協議，如
http、https。 - host：域名或 IP 位址。如
127.0.0.1、juejin.cn。 - port：埠口，可選。如果省略，預設為當前協議的預設埠口（如 HTTP 的 80、HTTPS 的 443）
這些內容會從請求 url 中提取，其他的部分會被丟棄掉。
此外，Origin 的值也可能為 null。
Host
Host 由兩部分組成：
- host：域名或 IP 位址
- port：埠口，可選項。
# 示例
Host: a.com:5500
Host: a.com
在 HTTPS 下，你在瀏覽器的開發者工具可能會看到這個東西：:authority。這是 HTTP2 協議中定義的偽頭欄位，向後相容 HTTP1，對應 Host。
Host 可以用於代理，當多個域名指向同一個 IP 時，Web Server 可以通過 Host 來識別並提供不同的服務。
如下面的 Nginx 設定就是將 blog.fstars.wang 和 static.fstars.wang 做了代理，雖然都指向同一台機器，但可以根據 Host 提供兩套獨立的服務。
Referer
當前請求的來源頁面。
值為 來源頁面 url 移除掉 fragment 和 userinfo 後的結果。
fragment 就是錨點，比如 https://blog.fstars.wang/posts/what-is-bezier-curve-and-draw-by-canvas/#chapter1 的 #chapter1，它表示打開頁面後，滾輪定位到的位置。
userinfo 則是使用者的資訊，如 https://username:password@example.com/foo/bar/ 中的 username:password。
fragment 代表的頁面捲動位置比較多餘，userinfo 則是敏感資訊，故而會被丟棄。
下面看看不同情況下會怎麼攜帶 Referer：
從頁面 https://nginx.org/ 跳轉到 https://nginx.org/2021.html 的時候，請求頁面 url 時，就會帶上
Referer: https://nginx.org/
對於頁面中的圖片來說，則帶上當前頁面的 url。
所以可以用來做圖片防盜連結，當 Referer 不在白名單中，就返回 403，或返回一個比較小的「你盜我的圖了」的圖片，或重新導向到不要自己錢的公域圖片上。