HTTP请求的Content-Type

「这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战」

最近在写接口时经常碰到Content-Type的内容，在上传和下载文件时又使用到不同的Content-Type值，因此在这里整理学习一下Content-Type的使用。

1. Content-Type是什么

在前后端交互的HTTP请求中，Content-Type是一个出现非常频繁的内容，Content-Type即内容类型，用于定义网络文件的类型和网页的编码，浏览器会根据Content-Type指定的编码方式来读取请求或返回结果中的内容，如网页、图片、文件等。

content-type，内容类型，也可以叫做MediaType（媒体类型）、Internet Media Type（互联网媒体类型）、MIME-Type。content-type存在于HTTP请求头信息中，告诉服务端和客户端在接收数据时以什么样的编码和样式进行解析。

2. Content-Type定义格式

语法格式：Content-Type：type/subtype; parameter

其中，

• type代表主类型，通常有text、application、image、multipart等
• subtype代表子类型，一般是文件格式类型如html、xml、json等
• parameter为编码方式，如utf-8等，是可选参数

如下为真实的Content-Type定义：

1. Content-Type: text/html; charset=utf-8，定义为html解析格式，编码方式为utf-8
2. Content-Type: multipart/form-data; boundary=something，定义为表单提交二进制文件

3. 常用的Content-Type类型

以下是常用的Content-Type类型，其中加粗的Content-Type类型在项目开发中使用更为频繁。

• text/html ： HTML格式，内容会解析为html网页格式
• text/plain ：纯文本格式
• text/xml：xml文件格式，内容按照xml格式解析
• application/xml： xml格式，编码默认为utf-8
• application/json： JSON数据格式
• application/x-www-form-urlencoded：form表单数据被编码为key=value格式发送到服务器（表单默认的提交数据的格式）
• application/octet-stream ： 二进制流数据（如常见的文件下载）
• multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

4. 实际Content-Type的选择

在基于HTTP的前后端交互中，根据不同的需求指定不同的Content-Type。

前端HTTP请求时，可以在html表单标签中或请求头中设置content-type的具体类型

• 如果是普通的表单提交，可以设置为content-type: application/x-www-form-urlencoded，该类型也作为表单提交时的默认内容类型
• 如果后端服务接口为restful接口，即使用json格式接收参数，则定义content-type: application/json
• 如果是上传文件的服务接口，则需要定义content-type: multipart/form-data

后端对HTTP请求响应时，可以使用response.setContentType("text/html;charset=utf-8")设置响应头格式

• 如果返回html网页，则response.setContentType("text/html")，此时返回的html格式会被浏览器解析为网页数据
• 如果是xml格式，则response.setContentType("text/xml")，浏览器中会展示结构化的xml数据
• 如果是图片文件，则有response.setContentType("image/png")，此时浏览器会解析展示图片内容
• 如果是下载文件，则设置内容格式后，进一步使用response.setHeader("Content-Disposition","attachment;fileName=文件名.后缀")
  • 因为浏览器在服务返回文件类型时会默认在浏览器中解析文件（类似预览），而设置Content-Disposition可以关闭浏览器解析，直接下载文件

注意：如果在HTTP请求过程中出现了乱码，即数据的编码方式和解码不一致导致，此时可以考虑：

1. 后端接收前端数据时乱码，后端可以用request.setCharacterEncoding(“utf-8”)设置解析解码方式
2. 前端浏览器解析后端返回数据时出现乱码，后端设置内容类型时增加utf-8编码，如response.setContentType("text/html;charset=utf-8")，前端浏览器接收时也要设置为utf-8编码