http 协议中的content-type

红太狼 2021-05-12 11:50 568阅读 1赞

content-type可以位于请求头、响应头，分别代表：

*  Request头：请求的与实体对应的MIME信息（post请求时的请求体）
 *  Response头：返回内容的MIME类型

由于http1.0版规定，头信息必须是 ASCII 码类型（文本），后面的实体数据可以是任何格式。因此，服务器回应的时候，必须告诉客户端，数据是什么格式，这就是Content-Type字段的作用。同样，在请求时，通过它可以告诉服务器post请求体属于那种格式。

### 1、响应头中的content-type： ###

在响应中，Content-Type告诉客户端响应体的内容类型，浏览器根据它使用不同的方式解析响应体。

下面是一些常见的Content-Type字段的值：

*  text/plain
 *  text/html
 *  text/css
 *  image/jpeg

这些数据类型总称为MIME type，每个值包括一级类型和二级类型，之间用斜杠分隔，还可以在尾部使用分号添加参数。例如；Content-Type: text/html; charset=utf-8

除了预定义的类型，厂商也可以自定义类型。

### 2、请求头中的content-type：（四种常见的 POST 提交数据方式） ###

http协议规定 POST 请求提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。

但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。

![20200718194231137.png][]

**1）application/x-www-form-urlencoded：**

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
    Content-Type: application/x-www-form-urlencoded;charset=utf-8
    
    title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持；很多时候，我们用 Ajax 提交数据时，也是使用这种方式。例如 JQuery 和 QWrap 的 Ajax，Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8」。

**2）multipart/form-data：**

这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data。看个示例：

POST http://www.example.com HTTP/1.1
    Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
    
    ------WebKitFormBoundaryrGKCBY7qhFd3TrwA
    Content-Disposition: form-data; name="text"
    
    title
    ------WebKitFormBoundaryrGKCBY7qhFd3TrwA
    Content-Disposition: form-data; name="file"; filename="chrome.png"
    Content-Type: image/png
    
    PNG ... content of chrome.png ...
    ------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。关于 multipart/form-data 的详细定义，请前往 [rfc1867][] 查看。

上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段标准中原生 <form> 表单也[只支持这两种方式][Link 1]（通过 <form> 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得非常少）。

随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。

**3）application/json：**

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求/响应头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数。

Google 的 AngularJS 中的 Ajax 功能，默认就是提交 JSON 字符串。例如：

var data = {'title':'test', 'sub' : [1,2,3]};
    $http.post(url, data).success(function(result) {
        ...
    });

最终发送的请求是：

POST http://www.example.com HTTP/1.1 
    Content-Type: application/json;charset=utf-8
    
    {"title":"test","sub":[1,2,3]}

这种方案，可以方便的提交复杂的结构化数据，特别适合 RESTful 的接口。

**4）text/xml：**

我的博客之前[提到过 XML-RPC][XML-RPC]（XML Remote Procedure Call）。它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的：

POST http://www.example.com HTTP/1.1 
    Content-Type: text/xml
    
    <?xml version="1.0"?>
    <methodCall>
        <methodName>examples.getStateName</methodName>
        <params>
            <param>
                <value><i4>41</i4></value>
            </param>
        </params>
    </methodCall>

XML-RPC 协议简单、功能够用，各种语言的实现都有。它的使用也很广泛，如 WordPress 的 [XML-RPC Api][]，搜索引擎的 [ping 服务][ping]等等。JavaScript 中，也有[现成的库][Link 2]支持以这种方式进行数据交互，能很好的支持已有的 XML-RPC 服务。不过，我个人觉得 XML 结构还是过于臃肿，一般场景用 JSON 会更灵活方便。

参考：[https://imququ.com/post/four-ways-to-post-data-in-http.html][https_imququ.com_post_four-ways-to-post-data-in-http.html]

[20200718194231137.png]: /images/20210511/0d78d4e45c7a48dcbc4f81347d9b3631.png
[rfc1867]: http://www.ietf.org/rfc/rfc1867.txt
[Link 1]: http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4
[XML-RPC]: http://www.imququ.com/post/64.html
[XML-RPC Api]: http://codex.wordpress.org/XML-RPC_WordPress_API
[ping]: http://help.baidu.com/question?prod_en=master&class=476&id=1000423
[Link 2]: http://plugins.jquery.com/xmlrpc/
[https_imququ.com_post_four-ways-to-post-data-in-http.html]: https://imququ.com/post/four-ways-to-post-data-in-http.html