content-type · 前端筆記

[TOC] # 簡介 `content-type` 是 `HTTP` 的首部字段，用于指示資源的 MIME 類型，說明請求或返回的消息主體是用何種方式編碼。 <br> 在響應中，`Content-Type` 標頭告訴客戶端實際返回的內容的內容類型。 <br> 在請求中， (如 `POST` 或 `PUT`)，客戶端告訴服務器實際發送的數據類型。 <br> ## 句法 ~~~ Content-Type: text/html; charset=utf-8 Content-Type: multipart/form-data; boundary=something ~~~ 上面列的兩個Content-Type是通用的句法結構： * **text/html**，是指請求的 MIME（media-type），他分為兩個部分 `type` 和 `subtype`，以“/”進行分割；`subtype` 是 `type` 的詳細信息。例如 `text/plain` 中 `text` 指文本，`plain` 對 `text` 進一步限制，指純文本。常見的 type 有： * Text：用于標準化地表示的文本信息，文本消息可以是多種字符集和或者多種格式的； * Multipart：用于連接消息體的多個部分構成一個消息，這些部分可以是不同類型的數據； * Application：用于傳輸應用程序數據或者二進制數據； * Message：用于包裝一個E-mail消息； * Image：用于傳輸靜態圖片數據； * Audio：用于傳輸音頻或者音聲數據； * Video：用于傳輸動態影像數據，可以是與音頻編輯在一起的視頻數據格式。 * **charset**：是指定字符編碼的標準，常見的有"ISO-8859-1"、"UTF-8"、"GB2312“，”ASCII“等; * **boundary**：多用于上傳文件時使用，用于分割數據； > MIME type （現在稱為“媒體類型(media type)”，但有時也是“內容類型(content type)”）是指示文件類型的字符串，與文件一起發送（例如，一個聲音文件可能被標記為 audio/ogg，一個圖像文件可能是 image/png）。它與傳統Windows上的文件擴展名有相同目的。 # 常用類型常見的 media-type 有： * text/html * text/plain * text/css * text/javascript * application/xml * application/x-www-form-urlencoded * application/json * multipart/form-data 前面的幾種都比較簡單，下面主要介紹一下后面幾種類型。 ## application/x-www-form-urlencoded 這是最常見的 POST 提交數據的方式了。瀏覽器的原生 `<form>` 表單，如果不設置 `enctype` 屬性，那么最終就會以 `application/x-www-form-urlencoded` 方式提交數據。比如下面一個簡單的表單： ~~~ <form action="http://homeway.me/post.php" method="POST"> <input type="text" name="name" value="homeway"> <input type="text" name="key" value="nokey"> <input type="submit" value="submit"> </form> ~~~ 首先，Content-Type 被指定為 `application/x-www-form-urlencoded`；其次，提交的數據按照 key1=val1&key2=val2 的方式進行編碼，key 和 val 都會進行 URL 轉碼。 ## multipart/form-data 常見的 POST 數據提交的方式。我們使用表單上傳文件時（type=file），必須讓 form 的 enctype 等于這個值。如果上傳照片，文件等，由于很多情況下都會有批量上傳，為了區分不同的數據，multipart/form-data的類型有boundary參數進行分割， ~~~ <form action="/" method="post" enctype="multipart/form-data"> <input type="file" name="file1" value="some text"> <input type="file" name="file2"> <button type="submit">Submit</button> </form> 復制代碼 ~~~ ~~~ ------WebKitFormBoundary18bktajg65CSIx4j Content-Disposition: form-data; name="files"; filename="test1.txt" Content-Type: text/plain this is file1; ------WebKitFormBoundary18bktajg65CSIx4j Content-Disposition: form-data; name="files"; filename="test2.txt" Content-Type: text/plain this is file2; ------WebKitFormBoundary18bktajg65CSIx4j-- 復制代碼 ~~~ 上面請求是上傳了兩個文件，分別是 test1.txt 和test2.txt，文件內容分別是“this is file1;” 和 “this is file2;” 可以看到兩個文件由于是文本，Content-Type 為 `text/plain`，`Content-Disposition` 中包含 `name` 和 `filename` 屬性，name 是 form 表單提交內容里的 name 屬性，文件之間有 `------WebKitFormBoundary18bktajg65CSIx4j` 這樣一串字符隔開，這串字符就是 `boundary` 分割符，字符串隨機生成不會與文本內容重復。 ## application/json `application/json` 是 POST 請求以 JSON 的格式向服務請求發起請求或者請求返回 JSON 格式的響應內容，服務端接收到數據后對 JSON 進行解析拿到所需要的參數。這也是現在用的比較多的一種形式。 ~~~ POST [http://www.example.com](http://www.example.com) HTTP/1.1 Content-Type: application/json;charset=utf-8 // body {"title":"test","sub":[1,2,3]} ~~~ # 參考資料 [理解HTTP之 content-type](https://juejin.im/post/5cacc5f2f265da035a1f004c)