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

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

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

【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');
    })

 

PPT連結 視訊連結

更多內容，可以加入IT交流群565734203與大家一起討論交流

這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地