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

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【network中的請求信息，headers中的每一項分別是什么意義?】

【JS-5】network中的請求信息，headers中的每一項分別是什么意義?

?

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

?

1.背景介紹

作為一個Web開發人員，日常中與我們開發相關的，就是Chrome的開發者工具。Network標簽頁對于分析網站請求的網絡情況、查看某一請求的請求頭和響應頭還有響應內容很有用，特別是在查看Ajax類請求的時候，非常有幫助。今天就是要簡要說說Chrome的開發者工具中Network中header部分。

?

2.知識剖析

Network面板-請求表

????Name：資源名稱，點擊名稱可以查看資源的詳情情況，包括Headers、Preview、Response、Cookies、Timing。????

????Status：HTTP狀態碼。

????Type：請求的資源MIME類型。

????Initiator：標記請求是由哪個對象或進程發起的（請求源）。

????????Parser： 請求由Chrome的HTML解析器時發起的。

????????Redirect：請求是由HTTP頁面重定向發起的。

????????Script：請求是由Script腳本發起的。

????????Other：請求是由其他進程發起的，比如用戶點擊一個鏈接跳轉到另一個頁面或者在地址欄輸入URL地址。

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

????Time：請求或下載的時間，從發起Request到獲取到Response所用的總時間。

????Timeline：顯示所有網絡請求的可視化瀑布流(時間狀態軸)，點擊時間軸，可以查看該請求的詳細信息，點擊列頭則可以根據指定的字段可以排序。

?

????通過點擊某個資源的Name可以查看該資源的詳細信息，根據選擇的資源類型顯示的信息也不太一樣，可能包括如下Tab信息：

Headers：該資源的HTTP頭信息。

Preview：根據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。

Response：顯示HTTP的Response信息。

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

Timing：顯示資源在整個請求生命周期過程中各部分花費的時間。

?

查看資源HTTP頭信息

?

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

General部分:????

????Request URL:資源的請求url

????Request Method:HTTP方法

????Status Code:響應狀態碼

????200（狀態碼） OK（原因短語）????

????301 - 資源（網頁等）被永久轉移到其它URL????

????404 - 請求的資源（網頁等）不存在????

????500 - 內部服務器錯誤????

Response Headers:

????Content-Encoding:gzip ——壓縮編碼類型

????Content-Type:text/html ——服務端發送的類型及采用的編碼方式????

????Date:Tue, 14 Feb 2017 03:38:28 GMT ——客戶端請求服務端的時間????

????Last-Modified:Fri, 10 Feb 2017 09:46:23 GMT ——服務端對該資源最后修改的時間，GMT是格林尼治標準時間????

????Server:nginx/1.2.4 ——服務端的Web服務端名????

????Transfer-Encoding:chunked ——分塊傳遞數據到客戶端????

Request Headers:

????Accept:text/html ——客戶端能接收的資源類型????

????Accept-Encoding:gzip, deflate ——客戶端能接收的壓縮數據的類型????

????Accept-Language:en-US,en;q=0.8 ——客戶端接收的語言類型????

????Cache-Control:no-cache ——服務端禁止客戶端緩存頁面數據????

????Connection:keep-alive ——維護客戶端和服務端的連接關系????

????Cookie: ——客戶端暫存服務端的信息????

????Host:www.jnshu.com ——連接的目標主機和端口號????

????Pragma:no-cache ——服務端禁止客戶端緩存頁面數據????

????Referer:http://www.jnshu.com/daily/12345 ——來于哪里????

????User-Agent: ——客戶端版本號的名字????

?

3.常見問題

????使用post發送請求時如何設置content-type的值？

?

4.解決方案

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

????????1. application/x-www-form-urlencoded 最常見的POST提交格式，使用這個編碼格式post的數據會以鍵值對的方式提交????

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

????????3. application/json 提交JSON格式的數據

????設置請求頭的方法：

????????1、在http服務的在服務端發送請求時，也就是調用http()方法時，在config對象中設置請求頭信息。事例如下：

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

????????這種方法的好處就是針對不同路徑的請求，可以個性化配置請求頭部，缺點就是，不同路徑請求都需要單獨配置。

?

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

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

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

????????這種方式添加請求頭信息的優勢就是可以給不同請求方式添加相同的請求頭信息，缺點就是不能夠為某些請求path添加個性化頭信息。

?

5.代碼實戰

6.拓展思考

????HTTP的缺點

????????通訊使用明文（不加密），內容可能會被監聽；????

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

????????無法證明白報文的完整性，所以有可能已被篡改；????

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

????????HTTP + 加密 + 認證 + 完整性保護 = HTTPS

?

7.參考文獻

參考一：HTTP請求頭和響應頭含義

參考二：content-type說明

參考三：Network面板

參考四：$http-設置http請求頭

?

8.更多討論

1、TIMELINE 時間軸中的不同顏色的線代表什么意思？

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

2、所有請求都有Content-Type嗎？

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

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

????答：有的。

????????第三種設置請求頭信息的地方是$httpProvider.interceptors。也就是為請求或相應注冊一個攔截器。使用這這方式我們首先需要定義一個服務。

????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){// ...}};})

然后把上面定義的服務注冊到$httpProvider.interceptors中。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。