http 请求头的几种Content-type

1. GET 请求

GET 请求不存在请求实体部分，键值对参数放置在 URL 尾部，因此请求头不需要设置 Content-Type 字段

非 ASCII 码会自动进行编码转换，例如发送请求：www.bilibili.com?hehe=你的我的

2. POST 请求

第一类：raw 原始类型，可以上传任意格式的文本，比如 text、json、xml、html

该编码类型的表单，必须通过AJAX技术

1. JSON: application/json
2. XML: text/xml
3. 纯文本: text/plain
4. html: text/html

第二类：application/x-www-form-urlencoded，会将表单内的数据转换拼接成 key-value 对（非 ASCII 码进行编码）

URLencoded: application/x-www-form-urlencoded​​​​​​​

 

HTML中<form>标签的enctype属性用来指定表单编码格式，默认为application/x-www-form-urlencoded，即以下两个表单完全等价。

<form method='post'>
  <input type="text" name='title'>
  <input type="text" name='subtitle'>
  <input type="submit">
</form>

<form  method='post' enctype='application/x-www-form-urlencoded'>
  <input type="text" name='title'>
  <input type="text" name='subtitle'>
  <input type="submit">
</form>

上述表单将会显示为两个文本框和一个提交按钮。我们在文本框中分别写入test和中国后，点击提交按钮。产生的HTTP请求可能是这样的：

可以打开Chrome控制台的Network标签，找到这次请求，便可以看到下面的信息。

请求头（这里只给出了Content-Type字段）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded

请求体：

title=test&subtitle=%E4%B8%AD%E5%9B%BD

这里你看到的%E4%B8%AD%E5%9B%BD即是中国按照base64编码（url通用的编码方式）后的结果。可以在Chrome Console中通过decodeURI('%E4%B8%AD%E5%9B%BD')来解码。

 

第三类：multipart/form-data，将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件

 

Multipart: multipart/form-data

在Web开发中，前三种格式非常常见。HTML中<form>支持urlencoded,multipart,plain text，通过enctype属性来进行设置。AJAX中默认的则是JSON编码格式。

multipart编码方式则需要设置enctype为multipart/form-data。

<form method="post" enctype="multipart/form-data">
    <input type="text" name="title" value="harttle">
    <input type="file" name="avatar">
    <input type="submit">
</form>

这里我们还设置了<input type='text'>的默认值为harttle。

该表单将会显示为一个文本框、一个文件按钮、一个提交按钮。然后我们选择一个文件：chrome.png，点击表单提交后产生的请求可能是这样的：

请求头：

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

请求体：

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="title"

harttle
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="avatar"; filename="chrome.png"
Content-Type: image/png

 ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这便是一个multipart编码的表单。Content-Type中还包含了boundary的定义，它用来分隔请求体中的每个字段。正是这一机制，使得请求体中可以包含二进制文件（当然文件中不能包含boundary）。