详解Content-Type

[bytemofan]

Content-type用于指定请求和响应的HTTP内容类型。可以显式的指定，默认为text/html。

网络请求中，常用的Content-Type有以下几种：

• text/html
• text/plain
• text/css
• text/javascript
• image/jpeg
• image/png
• image/gif
• application/x-www-form-urlencoded
• multipart/form-data
• application/json
• application/xml
• ......

其中，text/html、text/plain、text/plain、text/javascript、image/*都是常见的页面资源类型。 application/x-www-form-urlencoded、multipart/form-data、application/json、application/xml这四个则是ajax请求，表单提交或上传文件常用的资源类型。

更多资源类型参考这里。

application/x-www-form-urlencoded

• 最常见的POST提交数据方式。
• 原生form默认提交方式（可以由enctype指定提交数据类型）
• jQuery、zepto等默认数据提交方式

提交的数据按照key=value&key1=value1形式，类似这种：

在chorme的network面板下，默认请求体是被解析的，展示成FormData的形式：

multipart/form-data

使用表单上传文件时，必须指定表单的enctype属性值为multipart/form-data。 请求体被分割成多部分，每部分使用--boundary分割，使用--boundary--\r\n结束。 示例：

<form action="/upload" enctype="multipart/form-data" method="post">
    用户名: <input type="text" name="username">
    密码: <input type="password" name="password">
    上传文件: <input type="file" name="file">
    <input type="submit" value="提交">
</form>

请求头：

application/json

以json格式提交数据，可能需要后端支持。请求体类似这样：

POST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

在chorme的network面板中，我们可以看到json格式提交的数据会显示成Request Payload:

axios默认post提交方式就是application/json,所以，在使用axios提交表单时需要注意后端能不能解析，不能解析需要设置POST常用格式application/x-www-form-urlencoded，且提交的数据需要使用qs模块序列化成title=test&sub=[1,2,3]的格式，这部分功能可以再axios的拦截器里设置：

axios.interceptors.request.use(config => {
   if(config.method === 'post'){
       config.data = qs.stringify(config.data);
       config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
   }
   return config;
}, function(err){});

application/xml

以xml格式提交数据，微信的请求就使用的这种格式，请求头如下：

POST http://www.example.com HTTP/1.1 
Content-Type: text/xml

<?xml version="1.0"?>
<resource>
    <id>123</id>
    <params>
        <name>
            <value>example</value>
        </name>
        <age>
            <value>21</value>
        </age>
    </params>
</resource>