HTTP請求頭的Content-Type欄位

查小小飛發表於2019-10-05
HTTP

請求中的Content-Type

在請求中 (如POST 或 PUT)，Content-Type欄位用於客戶端告訴伺服器實際傳送的資料型別。當你傳送一個HTTP的POST請求時，需要設定請求頭中的Content-Type欄位，告訴服務端你傳送的資料是什麼型別的。

設定請求頭中的Content-Type

當客戶端向服務端發起HTTP的POST請求時，需要告訴服務端，我們傳送的資料型別，方便服務端去解析資料。如果你不設定，那麼服務端可能無法處理你的請求。 為什麼需要設定

表單中設定請求頭的Content-Type

你有沒有想過，除了使用瀏覽器提供的XMLHttpRequest物件發起HTTP請求外，純粹的HTML是如何發起HTTP請求的,你一定會想到表單，對的，在HTML標籤中，能夠自定義發起GET或POST的HTTP請求的標籤，只有form標籤。當你設定成POST請求，點選提交按鈕後，就會發起一個HTTP POST請求，這當然不奇怪，也很熟悉，但你也許很少想到，既然這是一個POST請求，那麼我傳送HTTP請求中的Content-Type是怎麼設定的呢？

下面是一個普通的表單，點選提交後，檢視控制檯的NetWork,看錶單發出的請求。

 <form action="./login" method="POST">
    <input type="text" name="user-name">
    <input type="tel" name="user-tel">
    <input type="submit">
 </form>
複製程式碼

可以看到請求頭中的資訊如下：

POST / HTTP/1.1
Host: 127.0.0.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom
複製程式碼

你會發現，即使你沒有手動設定請求頭中的Content-Type,請求中會預設有。這是為什麼呢？因為form標籤的enctype屬性就是用於指定這個Content-Type的，其預設值就是：application/x-www-form-urlencoded。

那麼表單中enctype除了這個值外，還有沒有其他的呢，當然，因為僅僅一種資料型別怎麼能夠滿足實際需求呢？form 的 enctype屬性總共有三種值:

  1. application/x-www-form-urlencoded
  2. multipart/form-data
  3. text/plain

分別說一下，這三種型別的使用：

  • application/x-www-form-urlencoded：

用於普通欄位的表單資料，表單資料會在請求體中，資料以符合某種格式(就是application/x-www-form-urlencoded這個格式啦，這真不是廢話)傳送給服務端，至於這個具體是什麼樣的格式，看MDN就可以知道了，總之，這個不是重點，因為就是一種格式而已。

  • multipart/form-data

用於檔案或二進位制資料，資料會按照某種格式(就是multipart/form-data這種格式啦，這真不是廢話)，你想知道這種格式具體是什麼樣的就看MDN，因為這並不是重點，就是一種格式而已。

  • text/plain

永遠不要使用這個值，因為不會被可靠的去解析。

小結: 以上就是如何設定form表單中POST請求的Content-Type，就是通過form的enctype屬性設定。

AJAX 中設定POST請求頭的Content-Type

AJAX 不只由XMLHtppRequest實現，不是，不是，不是，還有Fetch

XMLHttpRequest物件如何設定Content-Type

我們經常使用AJAX傳送HTTP請求，那麼在AJAX發的HTTP的請求中，是如何對請求頭的Content-Type進行設定的呢？很簡單，用XMLHttpRequest的API即可設定，即：XMLHttpRequest.setRequest.header()，這個方法用於設定請求頭的，Content-Type可以這樣設定：xhr.setRequest.header("Content-Type","application/x-www-form-urlencoded ")

例如傳送JSON資料

var xhr = new XMLHttpRequest()
xhr.open('POST','./index.php')
xhr.setRequestHeader('Content-Type','application/json')
xhr.onreadystatechange = function() {
    xxx
}
xhr.send(JSON.stringfy(data))
複製程式碼

小結: AJAX中通過XMLHttpRequest.setRequest.header()設定Content-Type欄位。

Feth如何設定Content-Type

之前一直是由瀏覽器提供的XMLHttpRequest物件實現的AJAX,後來Ferch API也實現了同樣的功能，那麼這種情況是如何設定請求中的Content-Type呢？ 使用 Fethc提供的Headers API即可設定，具體設定如下：

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
複製程式碼

小結: Fetch中通過Headers API 設定Content-Type欄位。

相關文章