大家好，我是前端西瓜哥。

HTTP 請求頭字段中的 Origin、Host 和 Referer 非常相似，乍一看都是域名相關(guān)的值，非常容易弄混。我在面試中也被問過，因為沒準備好而啞口無言。

今天西瓜哥我來帶領(lǐng)大家學(xué)習這三個頭字段，務(wù)必學(xué)完后能好好分清楚它們。

Origin

Origin 由三部分組成：

1. scheme：協(xié)議，如 http、https。
2. host：域名或 IP 地址。如 127.0.0.1、juejin.cn。
3. port：端口，可選。如果省略，默認為當前協(xié)議的默認端口（如 HTTP 的 80、HTTPS 的 443）

這些內(nèi)容會從請求 url 中提取，其他的部分會被丟棄掉。

此外，Origin 的值也可能為 null。

# 示例
Origin: http://a.com:8080
Origin: http://b.com
Origin: https://juejin.cn
Origin: null

Origin 會在跨域請求時帶上，服務(wù)端據(jù)此判斷是否允許跨域，是 CORS 機制的重要一環(huán)。

如何通過 CORS 讓一個請求能夠正常跨域比較復(fù)雜，可以看我寫的這一篇文章：《瀏覽器跨域請求的機制：CORS》

在非 GET 和 HEAD 方法的同源請求中，瀏覽器也會加上 Origin。西瓜哥對此不太理解，為什么同源也要加 Origin。我覺得對于同源請求，要么都別加 Origin，要么就全都加上。

Host

Host 由兩部分組成：

1. host：域名或 IP 地址
2. port：端口，可選項。

# 示例
Host: a.com:5500
Host: a.com

在 HTTPS 下，你在瀏覽器的開發(fā)者工具可能會看到這個玩意：:authority。這是 HTTP2 協(xié)議中定義的偽頭字段，向后兼容 HTTP1，對應(yīng) Host。

Host 可以用于代理，當多個域名指向同一個 IP 時，Web Server 可以通過 Host 來識別并提供不同的服務(wù)。

如下面的 Nginx 配置就是將 blog.fstars.wang 和 static.fstars.wang 做了代理，雖然都指向同一臺機器，但可以根據(jù) Host 提供兩套獨立的服務(wù)。

server {
    # 博客頁面
    server_name  blog.fstars.wang;
    location / {
        proxy_pass   http://localhost:3000;
    }
}

server {
    # 圖片等資源
    server_name  static.fstars.wang;
    location / {
        root   /www/static/;
    }
}

Referer

當前請求的來源頁面。

值為?來源頁面 url 移除掉 fragment 和 userinfo 后的結(jié)果。

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/ 跳轉(zhuǎn)到 https://nginx.org/2021.html 的時候，請求頁面 url 時，就會帶上

Referer: https://nginx.org/

對于頁面中的圖片來說，則帶上當前頁面的 url。

所以可以用來做圖片防盜鏈，當 Referer 不在白名單中，就返回 403，或返回一個比較小的 “你盜我的圖了” 的圖片，或重定向到不要自己錢的公域圖片上。

結(jié)尾

簡單總結(jié)一下：

• Origin：協(xié)議+域名+端口，主要用于跨域。
• Host：域名+端口，HTTP2 對應(yīng)字段為 :authority，主要用于服務(wù)器區(qū)分服務(wù)。
• Referer：去掉 fragment（錨點）和 userinfo（用戶信息）的 url，用于確認請求的來源頁面。

我是前端西瓜哥，一名喜歡分享的前端開發(fā)，最近在學(xué)些 HTTP 知識，歡迎關(guān)注我。

本文使用 文章同步助手 同步