HTTP请求的Content-Type

1,984 阅读3分钟

「这是我参与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编码