HTTP Content‑Type 完整详解

学以智用
0 阅读3分钟

Content‑Type 是 HTTP 请求/响应头，用来告诉接收方：请求/响应体的数据是什么MIME类型，浏览器/服务器据此解析body内容。

格式：Content-Type: ; charset=<编码>

  • mime‑type：主类型/子类型
  • charset：文本编码，常用 utf‑8；二进制文件不要加charset

一、文本类 text/*

Content-Type说明使用场景
text/plain纯文本，无格式返回普通文本、日志、简单字符串
text/htmlHTML网页返回html页面，浏览器渲染网页
text/cssCSS样式表返回css文件
text/javascriptJS脚本（旧标准）js文件，现在推荐application/javascript
text/xmlXML文本xml格式数据，老式接口

示例

Content-Type: text/html;charset=utf-8

二、JSON / XML 结构化数据 application/*（接口最常用）

Content-Type说明场景
application/jsonJSON格式前后端JSON接口99%使用
application/xmlxml数据soap接口、老系统xml接口
application/x-www-form-urlencoded表单url编码form表单默认，key=value&a=1，普通post表单
application/json;charset=utf-8json带编码防止中文乱码

⚠️application/x‑www‑form‑urlencoded： 数据格式：name=zhangsan&age=20，只能传简单键值，不能传文件。

三、文件上传 multipart/*

专门用于表单上传文件，不能用application/x‑www‑form‑urlencoded

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxxxx
  • boundary：分隔符，分割表单多个字段（普通字段+文件字节流），浏览器自动生成，不要手动写。
  • 场景：form表单设置 enctype="multipart/form-data"，上传图片、文件。

四、二进制文件、媒体资源

Content‑Type用途
application/octet‑stream通用二进制流，下载文件，浏览器直接弹出下载框
image/jpegjpg图片
image/pngpng图片
image/gifgif动图
image/webpwebp图片
audio/mpegmp3音频
video/mp4mp4视频
application/pdfpdf文档
application/zipzip压缩包

application/octet‑stream示例：

Content-Type: application/octet-stream
Content-Disposition: attachment; filename="demo.xlsx"

Content‑Disposition 配合它实现下载文件。

五、容易混淆的3种POST请求类型（高频面试）

1. application/x‑www‑form‑urlencoded

  • 普通表单post，无文件；body：username=aaa&password=123
  • axios默认post就是这个。

2. application/json

  • body直接放json字符串：{"username":"aaa"}
  • 现在主流REST接口。

3. multipart/form‑data

  • 文件上传，同时可以带普通参数，必须带boundary。

❌错误：上传文件设置application/json，会直接报错，文件二进制无法json序列化。

六、其他少见MIME

  1. application/javascript：标准js MIME，替代废弃text/javascript
  2. application/vnd.ms‑excel：旧版excel
  3. application/vnd.openxmlformats‑officedocument.spreadsheetml.sheet：xlsx新版excel

七、常见踩坑点

  1. charset只给文本类型用：图片、二进制流不要写charset=utf‑8，会导致解析异常。
  2. 后端返回json中文乱码：设置 Content-Type:application/json;charset=utf‑8
  3. 不要手动写boundary，multipart/form-data由http客户端自动生成。
  4. application/octet‑stream只是二进制标记，不能识别文件类型，只是强制下载。
  5. 请求头Content-Type告诉服务器请求体格式；响应头告诉浏览器响应体格式，两者独立。

八、完整示例

1）json请求

POST /api/login HTTP/1.1
Content-Type: application/json;charset=utf-8

{"username":"test","pwd":"123456"}

2）表单url编码

POST /api/login HTTP/1.1
Content-Type: application/x-www-form-urlencoded

username=test&pwd=123456

3）文件下载响应

HTTP/1.1 200 OK
Content-Type: application/octet-stream
Content-Disposition: attachment;filename="test.zip"
avatar
文章
阅读
粉丝