HTTP里頭到底都是些什么？

有朋友在后臺(tái)留言，詢問如何區(qū)分用戶是在普通瀏覽器還是在微信里面打開自家網(wǎng)站的，我是建議他看下「UA的故事」這篇?dú)v史文章，然后留下這段微信的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，服務(wù)器可以知道用戶在什么瀏覽器上瀏覽網(wǎng)頁，如果還想知道一些其它信息，應(yīng)該從哪來查到呢？答案就是HTTP協(xié)議的Header。HTTP協(xié)議的Header是一塊數(shù)據(jù)區(qū)域，分為兩種類型，客戶端向服務(wù)區(qū)發(fā)送請(qǐng)求時(shí)帶的是請(qǐng)求頭，而服務(wù)器響應(yīng)客戶端數(shù)據(jù)時(shí)，帶的是響應(yīng)頭。請(qǐng)求頭里面主要是一些客戶端的基礎(chǔ)信息（UA就是其中的一部分），而響應(yīng)頭里面是響應(yīng)數(shù)據(jù)的一些信息，以及服務(wù)器要求客戶端如何處理這些響應(yīng)數(shù)據(jù)的指令。

我們來看栗子，這是打開豆瓣主頁的一個(gè)請(qǐng)求頭，里面的關(guān)鍵信息有：

• accept，表示當(dāng)前瀏覽器可以接受哪些文件類型，注意哦這里有image/webp，表示我的瀏覽器可以支持webp格式的圖片，那么如果服務(wù)器給我下飯webp的圖片，可以更省流量
• accept-encoding，表示當(dāng)前瀏覽器可以接受的數(shù)據(jù)編碼，如果服務(wù)器吐出的數(shù)據(jù)不是瀏覽器可接受的編碼，那么「亂碼導(dǎo)致的悲劇告白」還會(huì)重演
• accept-language，表示當(dāng)前使用的瀏覽語言，我的電腦當(dāng)然是中文啦，當(dāng)然一些英文也能接受:)
• cookie，了解一些cookie知識(shí)的同學(xué)都知道，很多和用戶相關(guān)的信息都存在cookie里，用戶在向服務(wù)器發(fā)送請(qǐng)求數(shù)據(jù)時(shí)會(huì)帶上。比如一個(gè)網(wǎng)站你登錄了一次之后，就不用再登錄了，就是因?yàn)槟愕牡卿洺晒Φ膖oken放在cookie中了，而且每次請(qǐng)求都發(fā)送給服務(wù)器，服務(wù)器就知道你是一個(gè)已登錄用戶
• user-agent，就是上面提到的UA，表示的是瀏覽器的版本信息

當(dāng)服務(wù)器收到我的這個(gè)請(qǐng)求后，會(huì)經(jīng)過一系列處理，返回我一個(gè)數(shù)據(jù)包，而響應(yīng)頭里面，就會(huì)描述這個(gè)數(shù)據(jù)包的基本信息，里面的關(guān)鍵信息有：

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

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

盡情的玩耍吧～

#專欄作家#

給產(chǎn)品經(jīng)理講技術(shù)，微信公眾號(hào)（pm_teacher），人人都是產(chǎn)品經(jīng)理專欄作家。資深程序猿，專注客戶端開發(fā)若干年，對(duì)前端、后臺(tái)技術(shù)略懂，熱衷于對(duì)新的科技領(lǐng)域的探索。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議