xhr中的content-type

爲了方便理解，首先建立一個xhr對象

let xhr = new XMLHttpRequest();
xhr.open('get', '/requestUrl?username=xxx&pass=xxx');
xhr.send();
複製代碼

xhr在get請求方式下，content-type通常是不用設置的；由於get請求方式，只有一種傳參方式：?username=xxx&pass=xxx；後端服務器能明確的知道，接受到的數據是什麼格式

然而，xhr在post請求方式下：

let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
xhr.send(data);
複製代碼

咱們知道post請求方式，參數是經過xhr.send(data)方式發送的。而且其中data的數據格式是字符串，可是這字符串是什麼格式的，能夠有不少種。後端服務器須要瀏覽器（客戶端），明確指出發送的是什麼格式的字符串數據，以便服務器解析。所以就須要經過請求頭設置content-type，用來告訴服務器，瀏覽器發送的參數是什麼格式的字符串：

// 不須要設置
一、content-type: text/plain; charset=UTF-8（默認格式，沒有格式的字符串）
複製代碼

二、content-type: application/x-www-form-urlencoded

let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
// 必須在xhr.send()前設置
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
// data必須是這種表單數據格式的字符串；不然服務器接受到數據，按照表單數據格式解析，實際發送的不是表單格式的數據，將會解析不出來
let data = 'username=xxx&pass=xxx';
xhr.send(data);
複製代碼

三、content-type: application/json; charset=UTF-8

let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
// 必須在xhr.send()前設置
xhr.setRequestHeader('content-type', 'application/json; charset=UTF-8');
// data必須是JSON字符串格式的，不然服務器接受到數據，按照JSON字符串格式解析，實際發送的不是JSON字符串，將會解析不出來
let data = JSON.stringify({username: 'xxx', pass: 'xxx'});
xhr.send(data);
複製代碼

爲了加深理解，如下是錯誤示範：

一、text/plain; charset=UTF-8（默認格式，沒有格式的字符串）；服務器是沒法按照指望解析出{username: 'xxx', pass: 'xxx'}這個對象，由於你告訴它的數據類型，是沒有格式的，它將不作解析，獲得的就是一個普通的字符串"{"username":"xxx","pass":"xxx"}"；儘管你看起來，它是一個JSON字符串，可是服務器只按照content-type指定的數據格式（text/plain; charset=UTF-8）解析

let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
let data = JSON.stringify({username: 'xxx', pass: 'xxx'});
xhr.send(data);
複製代碼

二、這樣也是錯誤的，你告訴服務器，我傳給的是JSON字符串，最後給的倒是表單數據格式的字符串；服務器會按照content-type指定的數據格式（application/json; charset=UTF-8'）解析接受到的字符串，最後沒能按照JSON字符串格式解析出這串字符串"username=xxx&pass=xxx"

let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
xhr.setRequestHeader('content-type', 'application/json; charset=UTF-8');
let data = "username=xxx&pass=xxx"
xhr.send(data);
複製代碼

最後，爲了說的透徹，寫了不少重複的字句，囉裏囉嗦；錯誤的示範不少，就很少舉例子了。