這里是修真院前端小課堂，每篇分享文從

【背景介紹】【知識(shí)剖析】【常見(jiàn)問(wèn)題】【解決方案】【編碼實(shí)戰(zhàn)】【擴(kuò)展思考】【更多討論】【參考文獻(xiàn)】

八個(gè)方面深度解析前端知識(shí)/技能，本篇分享的是：

【network中的請(qǐng)求信息，headers中的每一項(xiàng)分別是什么意義?】

【JS-5】network中的請(qǐng)求信息，headers中的每一項(xiàng)分別是什么意義?

?

大家好，我是IT修真院深圳分院第12期的學(xué)員韓鵬，一枚正直純潔善良的前端程序員，今天給大家分享一下，修真院官網(wǎng)JS任務(wù)5，深度思考中的知識(shí)點(diǎn)——network中的請(qǐng)求信息，headers中的每一項(xiàng)分別是什么意義?

?

1.背景介紹

作為一個(gè)Web開(kāi)發(fā)人員，日常中與我們開(kāi)發(fā)相關(guān)的，就是Chrome的開(kāi)發(fā)者工具。Network標(biāo)簽頁(yè)對(duì)于分析網(wǎng)站請(qǐng)求的網(wǎng)絡(luò)情況、查看某一請(qǐng)求的請(qǐng)求頭和響應(yīng)頭還有響應(yīng)內(nèi)容很有用，特別是在查看Ajax類(lèi)請(qǐng)求的時(shí)候，非常有幫助。今天就是要簡(jiǎn)要說(shuō)說(shuō)Chrome的開(kāi)發(fā)者工具中Network中header部分。

?

2.知識(shí)剖析

Network面板-請(qǐng)求表

????Name：資源名稱(chēng)，點(diǎn)擊名稱(chēng)可以查看資源的詳情情況，包括Headers、Preview、Response、Cookies、Timing。????

????Status：HTTP狀態(tài)碼。

????Type：請(qǐng)求的資源MIME類(lèi)型。

????Initiator：標(biāo)記請(qǐng)求是由哪個(gè)對(duì)象或進(jìn)程發(fā)起的（請(qǐng)求源）。

????????Parser： 請(qǐng)求由Chrome的HTML解析器時(shí)發(fā)起的。

????????Redirect：請(qǐng)求是由HTTP頁(yè)面重定向發(fā)起的。

????????Script：請(qǐng)求是由Script腳本發(fā)起的。

????????Other：請(qǐng)求是由其他進(jìn)程發(fā)起的，比如用戶(hù)點(diǎn)擊一個(gè)鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面或者在地址欄輸入U(xiǎn)RL地址。

? ? Size：從服務(wù)器下載的文件和請(qǐng)求的資源大小。如果是從緩存中取得的資源則該列會(huì)顯示(from cache)

????Time：請(qǐng)求或下載的時(shí)間，從發(fā)起Request到獲取到Response所用的總時(shí)間。

????Timeline：顯示所有網(wǎng)絡(luò)請(qǐng)求的可視化瀑布流(時(shí)間狀態(tài)軸)，點(diǎn)擊時(shí)間軸，可以查看該請(qǐng)求的詳細(xì)信息，點(diǎn)擊列頭則可以根據(jù)指定的字段可以排序。

?

????通過(guò)點(diǎn)擊某個(gè)資源的Name可以查看該資源的詳細(xì)信息，根據(jù)選擇的資源類(lèi)型顯示的信息也不太一樣，可能包括如下Tab信息：

Headers：該資源的HTTP頭信息。

Preview：根據(jù)你所選擇的資源類(lèi)型（JSON、圖片、文本）顯示相應(yīng)的預(yù)覽。

Response：顯示HTTP的Response信息。

Cookies：顯示資源HTTP的Request和Response過(guò)程中的Cookies信息。

Timing：顯示資源在整個(gè)請(qǐng)求生命周期過(guò)程中各部分花費(fèi)的時(shí)間。

?

查看資源HTTP頭信息

?

????在Headers標(biāo)簽里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和詳細(xì)的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。

General部分:????

????Request URL:資源的請(qǐng)求url

????Request Method:HTTP方法

????Status Code:響應(yīng)狀態(tài)碼

????200（狀態(tài)碼） OK（原因短語(yǔ)）????

????301 - 資源（網(wǎng)頁(yè)等）被永久轉(zhuǎn)移到其它URL????

????404 - 請(qǐng)求的資源（網(wǎng)頁(yè)等）不存在????

????500 - 內(nèi)部服務(wù)器錯(cuò)誤????

Response Headers:

????Content-Encoding:gzip ——壓縮編碼類(lèi)型

????Content-Type:text/html ——服務(wù)端發(fā)送的類(lèi)型及采用的編碼方式????

????Date:Tue, 14 Feb 2017 03:38:28 GMT ——客戶(hù)端請(qǐng)求服務(wù)端的時(shí)間????

????Last-Modified:Fri, 10 Feb 2017 09:46:23 GMT ——服務(wù)端對(duì)該資源最后修改的時(shí)間，GMT是格林尼治標(biāo)準(zhǔn)時(shí)間????

????Server:nginx/1.2.4 ——服務(wù)端的Web服務(wù)端名????

????Transfer-Encoding:chunked ——分塊傳遞數(shù)據(jù)到客戶(hù)端????

Request Headers:

????Accept:text/html ——客戶(hù)端能接收的資源類(lèi)型????

????Accept-Encoding:gzip, deflate ——客戶(hù)端能接收的壓縮數(shù)據(jù)的類(lèi)型????

????Accept-Language:en-US,en;q=0.8 ——客戶(hù)端接收的語(yǔ)言類(lèi)型????

????Cache-Control:no-cache ——服務(wù)端禁止客戶(hù)端緩存頁(yè)面數(shù)據(jù)????

????Connection:keep-alive ——維護(hù)客戶(hù)端和服務(wù)端的連接關(guān)系????

????Cookie: ——客戶(hù)端暫存服務(wù)端的信息????

????Host:www.jnshu.com ——連接的目標(biāo)主機(jī)和端口號(hào)????

????Pragma:no-cache ——服務(wù)端禁止客戶(hù)端緩存頁(yè)面數(shù)據(jù)????

????Referer:http://www.jnshu.com/daily/12345 ——來(lái)于哪里????

????User-Agent: ——客戶(hù)端版本號(hào)的名字????

?

3.常見(jiàn)問(wèn)題

????使用post發(fā)送請(qǐng)求時(shí)如何設(shè)置content-type的值？

?

4.解決方案

????常用的Content-Type值：????

????????1. application/x-www-form-urlencoded 最常見(jiàn)的POST提交格式，使用這個(gè)編碼格式post的數(shù)據(jù)會(huì)以鍵值對(duì)的方式提交????

????????2. multipart/form-data 通常上傳圖片等文件會(huì)使用這種編碼格式提交????

????????3. application/json 提交JSON格式的數(shù)據(jù)

????設(shè)置請(qǐng)求頭的方法：

????????1、在http服務(wù)的在服務(wù)端發(fā)送請(qǐng)求時(shí)，也就是調(diào)用http()方法時(shí)，在config對(duì)象中設(shè)置請(qǐng)求頭信息。事例如下：

????????????$http.post( url , data , {headers : {'My-Header' : 'value';}}).then(function( ){……});

????????這種方法的好處就是針對(duì)不同路徑的請(qǐng)求，可以個(gè)性化配置請(qǐng)求頭部，缺點(diǎn)就是，不同路徑請(qǐng)求都需要單獨(dú)配置。

?

????????2、第二種設(shè)置請(qǐng)求頭信息的方式就是在$httpProvider.defaults.headers屬性上直接配置。事例如下：

????angular.module('app', []).config(function($httpProvider) {$httpProvider.defaults.headers.common = { 'My-Header' : 'value' }})

????????$httpProvider.defaults.headers有不同的屬性，如common、get、post、put等。因此可以在不同的http請(qǐng)求上面添加不同的頭信息，common是指所有的請(qǐng)求方式。

????????這種方式添加請(qǐng)求頭信息的優(yōu)勢(shì)就是可以給不同請(qǐng)求方式添加相同的請(qǐng)求頭信息，缺點(diǎn)就是不能夠?yàn)槟承┱?qǐng)求path添加個(gè)性化頭信息。

?

5.代碼實(shí)戰(zhàn)

6.拓展思考

????HTTP的缺點(diǎn)

????????通訊使用明文（不加密），內(nèi)容可能會(huì)被監(jiān)聽(tīng)；????

????????不驗(yàn)證通訊方的身份，因此有可能遭遇偽裝；????

????????無(wú)法證明白報(bào)文的完整性，所以有可能已被篡改；????

????解決方法：使用HTTPS????

????????HTTP + 加密 + 認(rèn)證 + 完整性保護(hù) = HTTPS

?

7.參考文獻(xiàn)

參考一：HTTP請(qǐng)求頭和響應(yīng)頭含義

參考二：content-type說(shuō)明

參考三：Network面板

參考四：$http-設(shè)置http請(qǐng)求頭

?

8.更多討論

1、TIMELINE 時(shí)間軸中的不同顏色的線(xiàn)代表什么意思？

????答：Timeline工具里面使用是4種顏色來(lái)表示不同類(lèi)別的事件:?
????????????藍(lán)色：加載；黃色：腳本；紫色：渲染；綠色：繪制；

2、所有請(qǐng)求都有Content-Type嗎？

????答：GET 請(qǐng)求不存在請(qǐng)求實(shí)體部分，鍵值對(duì)參數(shù)放置在 URL 尾部，瀏覽器把form數(shù)據(jù)轉(zhuǎn)換成一個(gè)字串（name1=value1&name2=value2...），然后把這個(gè)字串追加到url后面，用?分割，加載這個(gè)新的url。因此請(qǐng)求頭不需要設(shè)置 Content-Type 字段。

3、除了已講的兩種，還有什么方法設(shè)置Content-Type嗎？

????答：有的。

????????第三種設(shè)置請(qǐng)求頭信息的地方是$httpProvider.interceptors。也就是為請(qǐng)求或相應(yīng)注冊(cè)一個(gè)攔截器。使用這這方式我們首先需要定義一個(gè)服務(wù)。

????myModule.factory('authInterceptor', function($rootScope, ?$cookies){return {request: function(config){config.headers = config.headers || {};if($cookies.get('token')){config.headers.authorization = 'Bearer ' + $cookies.get('token');}return config;},responseError: function(response){// ...}};})

然后把上面定義的服務(wù)注冊(cè)到$httpProvider.interceptors中。

? ?.config(function($httpProvider){$httpProvider.interceptors.push('authInterceptor');})

總結(jié)

以上是生活随笔為你收集整理的network中的请求信息，headers中的每一项分别是什么意义?的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。