HTTP里頭到底都是些什么？

有朋友在后臺留言，詢問如何區分用戶是在普通瀏覽器還是在微信里面打開自家網站的，我是建議他看下「UA的故事」這篇歷史文章，然后留下這段微信的UA：「Mozilla/5.0 (Linux; Android 6.0.1; SM-G9006V Build/MMB29U; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/48.0.2564.106 Mobile Safari/537.36?MicroMessenger/6.3.15.49_r8aff805.760 NetType/WIFI Language/zh_CN」

通過UA，服務器可以知道用戶在什么瀏覽器上瀏覽網頁，如果還想知道一些其它信息，應該從哪來查到呢？答案就是HTTP協議的Header。HTTP協議的Header是一塊數據區域，分為兩種類型，客戶端向服務區發送請求時帶的是請求頭，而服務器響應客戶端數據時，帶的是響應頭。請求頭里面主要是一些客戶端的基礎信息（UA就是其中的一部分），而響應頭里面是響應數據的一些信息，以及服務器要求客戶端如何處理這些響應數據的指令。

我們來看栗子，這是打開豆瓣主頁的一個請求頭，里面的關鍵信息有：

• accept，表示當前瀏覽器可以接受哪些文件類型，注意哦這里有image/webp，表示我的瀏覽器可以支持webp格式的圖片，那么如果服務器給我下飯webp的圖片，可以更省流量
• accept-encoding，表示當前瀏覽器可以接受的數據編碼，如果服務器吐出的數據不是瀏覽器可接受的編碼，那么「亂碼導致的悲劇告白」還會重演
• accept-language，表示當前使用的瀏覽語言，我的電腦當然是中文啦，當然一些英文也能接受:)
• cookie，了解一些cookie知識的同學都知道，很多和用戶相關的信息都存在cookie里，用戶在向服務器發送請求數據時會帶上。比如一個網站你登錄了一次之后，就不用再登錄了，就是因為你的登錄成功的token放在cookie中了，而且每次請求都發送給服務器，服務器就知道你是一個已登錄用戶
• user-agent，就是上面提到的UA，表示的是瀏覽器的版本信息

當服務器收到我的這個請求后，會經過一系列處理，返回我一個數據包，而響應頭里面，就會描述這個數據包的基本信息，里面的關鍵信息有：

• content-encoding，表示這次回包是以gzip格式壓縮編碼的，這種壓縮格式可以減少流量的消耗
• content-length，表示這次回包的數據大小，如果數據大小不匹配，要當作異常處理
• content-type，表示數據的格式，它是一個html頁面，同時頁面的編碼格式是utf-8，按照這些信息，可以正常的簡析出內容。content-type為不同的值時，瀏覽器會做不同的操作，如果content-type是application/octet-stream，表示數據是一個二進制流，此時瀏覽器會走下載文件的邏輯，而不是打開一個頁面
• set-cookie，圖中沒有，但是大家經常遇到，就是服務器通知瀏覽器寫入一個cookie
• location，這個圖中也沒有，也是經常遇到的，那就是重定向，比如你請求的是www.douban.com，檢測到你用的是手機瀏覽器，就把你的請求重定向到m.douban.com

通過HTTP的Header，可以識別出用戶的一些詳細信息，方便做更為定制化的需求，如果你想探索一下自己發出的請求中頭里面有些什么，你可以這樣做：打開Chrome瀏覽器并按下F12，喚起Chrome開發者工具，選擇network這個tab，你發出的每個請求的詳情都會在這里顯示了。

盡情的玩耍吧～

#專欄作家#

給產品經理講技術，微信公眾號（pm_teacher），人人都是產品經理專欄作家。資深程序猿，專注客戶端開發若干年，對前端、后臺技術略懂，熱衷于對新的科技領域的探索。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議