項(xiàng)目場景：

在實(shí)際開發(fā)過程中會遇到前后端對接調(diào)試接口的場景恩商，對于剛?cè)肼殘龅那岸诵率謥碚f变逃，如何跟后端快速的完成接口的調(diào)試對于整個開發(fā)的進(jìn)度來說至關(guān)重要，而了解http請求報(bào)文怠堪，有助于提高調(diào)試接口的效率揽乱。

接下來我們就來一起了解http報(bào)文的組成部分及相關(guān)的概念，然后著重分析http報(bào)文中的content-type 屬性

一粟矿、http報(bào)文中的組成部分

瀏覽器中最常見的兩個請求方式 get和post其中兩者的報(bào)文頭的格式都是包含以下四個部分凰棉，我們先來說說第一個 General

(1)General

Request URL：
請求的地址，指的是我們客戶端像服務(wù)端請求的地址陌粹，這個在開發(fā)過程中由后端開發(fā)人員提供撒犀，就是所謂的接口。
Request Method：
請求的類型掏秩，最常見的就是post和get請求或舞，其他的很少，這里都不說了蒙幻，說到get和post的請求映凳，我這里簡單說下二者的主要區(qū)別：1.數(shù)據(jù)傳輸?shù)拈L度限制，get由于瀏覽器對url長度的限制至多傳輸?shù)臄?shù)據(jù)大小在2kb邮破，post請求沒有數(shù)據(jù)大小的限制 2：安全性：由于get請求中的參數(shù)都是通過瀏覽器的url來進(jìn)行傳輸诈豌，你所需要的數(shù)據(jù)都會在瀏覽器中看到，而post請求則將請求的數(shù)據(jù)信息存儲在請求體中抒和，所以get請求的安全性較差矫渔，一般敏感信息都經(jīng)過加密由post請求進(jìn)行傳輸.3：get請求的速度比post快，所以如果對請求沒有特殊要求時摧莽，一般使用get蚌斩。
Status Code：
狀態(tài)碼，反應(yīng)了這個請求最終的狀態(tài)范嘱，一般通過這個來判斷你的請求是否成功送膳，如：200代表了你成功的訪問到了服務(wù)端。302：重定向丑蛤，你訪問的路徑后端給你重新定向到另一個頁面叠聋。403：拒絕訪問，也許是跨域受裹，也許是后端做了訪問限制碌补。404：你的訪問路徑有問題 虏束。500：服務(wù)端出現(xiàn)錯誤，具體關(guān)于狀態(tài)碼的內(nèi)容大家可以百度仔細(xì)去了解厦章。
Remote Address
服務(wù)器ip地址镇匀，通過這個屬性可以查看服務(wù)端的ip地址

(2)Responses Header

response.png

Content-Type
內(nèi)容類型，用于定義網(wǎng)絡(luò)文件的類型和網(wǎng)頁的編碼袜啃，決定文件接收方將以什么形式汗侵、什么編碼讀取這個文件，簡而言之就是定義了數(shù)據(jù)實(shí)體的媒介類型群发。
因?yàn)檫@個是在Responses Header里所以根據(jù)Content-Type定義可知這個是服務(wù)端返回的數(shù)據(jù)媒介類型晰韵，所以我們可以通過這個來查看后端返回的媒介類型是什么，一般比較常見的有如下幾種熟妓。
text/html：HTML格式
text/plain：純文本格式
application/json;charset=UTF-8：JSON數(shù)據(jù)格式
在上圖中我們可以看到Content-Type為application/json;charset=UTF-8雪猪，即后端返回的數(shù)據(jù)格式為json，前端拿到數(shù)據(jù)就可以以對象的形式直接處理數(shù)據(jù)了
Date
顯示當(dāng)前時間
Server
服務(wù)端采用的是什么服務(wù)器
Transfer-Encoding: chunked
表示輸出的內(nèi)容長度不能確定

(3)Request Header

requestHeader.png

這個是我們重點(diǎn)要關(guān)注的信息起愈，因?yàn)槔锩娴膶傩允怯晌覀冏约簛砜刂频闹缓蓿覀儊韽念^開始慢慢分析
(1)、accept:屬于請求頭信息抬虽，代表發(fā)送端（客戶端）希望接受的數(shù)據(jù)類型官觅，我們通過代碼來實(shí)踐一下

//在ajax請求中可以通過設(shè)置dataType來改變http請求中的accept屬性，看如下代碼
      $.ajax({
            type: "POST",
            url: url,
            data: jsondata,
            dataType: 'json',
            success: function (data) {              
              callback(data);
            },
            error: function (error) {
              console.log(error);
            }
        });

這是jquery的一個ajax請求斥赋，其中我設(shè)置了dataType 的類型為json,作為客戶端是希望服務(wù)端給我返回的媒體類型為json格式的數(shù)據(jù)：

save.png

其中請求中的accept 和返回中的Content-Type為一致的（后端返回的實(shí)體類型為json格式，下同)所以此時前端可以直接以對象的處理方式來使用后端返回的數(shù)據(jù)产艾，如果此時我更改一下前端的請求數(shù)據(jù)格式疤剑，看看會發(fā)生什么。

$.ajax({
           type: "POST",
           url: url,
           data: jsondata,
              dataType: 'text',
          success: function (data) {               
             callback(data);
           },
           error: function (error) {
             console.log(error);
           }
    });

此時我將請求頭的信息改為text闷堡，意思是希望從后端接收的媒體類型為字符串隘膘，如下所示

accept.png

(2) content-type（一般get請求中沒有該屬性，因?yàn)樗膫髦捣绞經(jīng)Q定了他不需要進(jìn)行對內(nèi)容體的設(shè)置）
request 頭信息中的content-type代表著客戶端像服務(wù)端傳輸數(shù)據(jù)的媒介類型或者是數(shù)據(jù)實(shí)體類型鸳玩，如果客戶端設(shè)置的數(shù)據(jù)類型不能被服務(wù)端正常解析阅虫，服務(wù)端會報(bào)錯誤，從而斷開連接不跟，看下面代碼

$.ajax({
            type: "POST",
            url: url,
            data:  JSON.stringify(jsonData),
               dataType: 'json',
              contentType: "application/json",
           success: function (data) {               
              callback(data);
            },
            error: function (error) {
              console.log(error);
            }
     });

當(dāng)你將contentType設(shè)置為json格式時即代表你客戶端要向后端傳送的數(shù)據(jù)為json格式颓帝，那么如上會發(fā)生什么了？

content.png

此時后端就拿不到前端所傳過來的json數(shù)據(jù)躬拢，這個和前端設(shè)置accept時出現(xiàn)的情況一樣躲履，即我希望你傳過來的數(shù)據(jù)和你真正傳過來的數(shù)據(jù)格式不一致，此時就需要前后端統(tǒng)一媒介類型了聊闯。

$.ajax({
            type: "POST",
            url: url,
            data: jsonData,
               dataType: 'json',
              success: function (data) {            
              callback(data);
            },
            error: function (error) {
              console.log(error);
            }
     });

此時頁面的信息

applation.png

如上工猜，當(dāng)我代碼中沒有設(shè)置content-type屬性是，ajax默認(rèn)的content-type為application/x-www-form-urlencoded菱蔬，是表單的默認(rèn)提交方式篷帅。
application/x-www-form-urlencoded：窗體數(shù)據(jù)被編碼為名稱/值對,此時post的提交的數(shù)據(jù)被編碼為鍵和值的格式，所以當(dāng)我們將content-type設(shè)置為此屬性時拴泌，瀏覽器就會將我們傳過去的值編碼為鍵值的形似魏身，如上圖所示，因?yàn)楹笈_默認(rèn)的就是按照這種規(guī)則進(jìn)行取值的蚪腐，所以前端data就需要按照正常的對象傳值就可以了箭昵，不能轉(zhuǎn)字符串或者其它形式，否則后端拿不到數(shù)據(jù)回季，就會報(bào)錯家制。比如

$.ajax({
            type: "POST",
            url: url,
            data: JSON.stringify(jsonData),
               dataType: 'json',
              success: function (data) {            
              callback(data);
            },
            error: function (error) {
              console.log(error);
            }
     });

save1.png

當(dāng)前端傳過去的數(shù)據(jù)被解析成上圖所示，后端在原先不變的情況下是不能直接進(jìn)行數(shù)據(jù)處理的泡一，故會拋出錯誤颤殴，中斷連接。
鼻忠。涵但。。帖蔓。剩下的其它屬性矮瘟，大家可以自己了解了解，暫時就不說了塑娇，以后會補(bǔ)上芥永。

總結(jié)

這個是基于項(xiàng)目中如何能快速的根據(jù)http的一些信息來加快接口的調(diào)試速度，總結(jié)如下钝吮。
1.首先前后端要統(tǒng)一http請求的方式是用get還是post埋涧。

2.客戶端在進(jìn)行ajax請求的時候板辽，一般都不對datatype進(jìn)行設(shè)置，我們通過查看響應(yīng)頭的content－type來查看服務(wù)端到返回的數(shù)據(jù)格式棘催，然后在前端進(jìn)行相應(yīng)的數(shù)據(jù)處理劲弦。

3.在客戶端進(jìn)行ajax請求時，我們需要和后端確定我們需要傳入的數(shù)據(jù)格式醇坝，此時我們可以通過ajax中的content－type來定義我們的實(shí)體數(shù)據(jù)的類型邑跪，默認(rèn)情況下和表單的提交編碼格式一致，如果這里設(shè)置兩邊不統(tǒng)一就會造成后端拿不到數(shù)據(jù)呼猪，服務(wù)端出錯直接斷開服務(wù)画畅。
總的來說，對于接口的調(diào)試宋距，如果能按照設(shè)計(jì)文檔一步一步來轴踱，應(yīng)該不會出現(xiàn)什么問題，如果一斷出現(xiàn)問題谚赎，則大概率原因就是前后端對數(shù)據(jù)的格式出現(xiàn)了不統(tǒng)一淫僻，此時我們可以通過http來查看到底是哪里出現(xiàn)問題了，有利于快速的找到問題所在壶唤。
關(guān)于網(wǎng)絡(luò)協(xié)議這塊雳灵，后面我會補(bǔ)上剩下的屬性介紹，并探討如何利用這些屬性來進(jìn)行問題的分析闸盔。