程序員別唬我系列之:HTTP Header
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協議
- 目前還沒評論,等你發揮!