家好，我是前端西瓜哥。
HTTP 請求頭字段中的 Origin、Host 和 Referer 非常相似，乍一看都是域名相關的值，非常容易弄混。我在面試中也被問過，因為沒準備好而啞口無言。
今天西瓜哥我來帶領大家學習這三個頭字段，務必學完后能好好分清楚它們。
Origin 由三部分組成：
這些內容會從請求 url 中提取，其他的部分會被丟棄掉。
此外，Origin 的值也可能為 null。
# 示例
Origin: http://a.com:8080
Origin: http://b.com
Origin: https://juejin.cn
Origin: null
Origin 會在跨域請求時帶上，服務端據此判斷是否允許跨域，是 CORS 機制的重要一環。
如何通過 CORS 讓一個請求能夠正常跨域比較復雜，可以看我寫的這一篇文章：《瀏覽器跨域請求的機制：CORS》
在非 GET 和 HEAD 方法的同源請求中，瀏覽器也會加上 Origin。西瓜哥對此不太理解，為什么同源也要加 Origin。我覺得對于同源請求，要么都別加 Origin，要么就全都加上。
Host 由兩部分組成：
# 示例
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 提供兩套獨立的服務。
server {
# 博客頁面
server_name blog.fstars.wang;
location / {
proxy_pass http://localhost:3000;
}
}
server {
# 圖片等資源
server_name static.fstars.wang;
location / {
root /www/static/;
}
}
當前請求的來源頁面。
值為 來源頁面 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，或返回一個比較小的 “你盜我的圖了” 的圖片，或重定向到不要自己錢的公域圖片上。
簡單總結一下：
我是前端西瓜哥，一名喜歡分享的前端開發，最近在學習 HTTP 知識，歡迎關注我。
說明：當前開發環境為windows，node版本使用16.15.1。啟動web時，確保后端服務已準備就緒。
#進入項目WEB根目錄
$ cd linkis/linkis-web
#安裝項目所需依賴
$ npm install參考官方編譯說明，windows下編譯一直異常，切換不同的node版本，均報錯:
根據報錯信息，修改package.json文件，刪除preinstall腳本（具體什么原因不太清楚），刪除node_modules目錄，再次編譯，執行成功。
運行npm run serve啟動服務,瀏覽器訪問http://localhost:8081/。使用后端gateway服務配置文件中配置的用戶名和密碼登錄。
直接執行會失敗，因為npm默認安裝lerna最新版本V7，V7很多命令已移除，需指定版本安裝lerna，我安裝的為6.4.0版本。
# 首先安裝lerna6.4.0
npm install -g lerna@6.4.0
# 安裝依賴
lerna bootstrap
# 開發啟動DSS
npm run serve 瀏覽器訪問http://localhost:8080/#/login。使用后端gateway服務配置文件中配置的用戶名和密碼登錄。
登錄成功后，點擊【管理臺】菜單，界面沒有，且控制臺報錯。
查看官網介紹，linkis已從dss中移除，查看源碼發現，跳轉管理臺的菜單是通過iframe訪問的linkis web系統，官網demo為什么可以訪問，是因為部署的時候做了nginx轉發。
所以，本地調試沒有使用nginx轉發的，是無法訪問linkis管理臺的，我們修改源碼，讓其直接跳轉到本地url即可。
goConsole() {
this.isHomePage = false;
this.isConsolePage = true;
this.currentId = -1;
//const url =
// location.origin + "/dss/linkis/?noHeader=1&noFooter=1#/console";
const url = "http://localhost:8081/?noHeader=1&noFooter=1/#/console";
this.$router.push({
path: '/commonIframe/linkis',
query: {
workspaceId: this.$route.query.workspaceId,
url
}
});
},重新運行dss web，管理臺可絲滑訪問！