HTTP协议：Content-Type

HTTP Content-Type 完全解析：定义、语法与常见 MIME 类型实战

关于 HTTP 头部 Content-Type 的核心内容，本文将从定义本质、语法规则、常见 MIME 类型（含使用场景/代码示例）、关键注意事项四个维度，系统梳理 Content-Type 的使用方法，帮你精准掌握不同场景下的类型选型。

一、Content-Type 核心定义

Content-Type（实体头部）是 HTTP 协议中用于指示资源的 MIME 类型（媒体类型） 的核心头部，其作用分两种场景：

响应头：服务器告诉客户端「实际返回内容的类型」（如 text/html 表示返回 HTML 页面，application/json 表示返回 JSON 数据）；
请求头：客户端（如浏览器/前端代码）告诉服务器「本次发送数据的类型」（如 POST 请求中，multipart/form-data 表示发送表单+文件数据）。

关键补充：防止浏览器 MIME 嗅探

浏览器可能会忽略 Content-Type 的值，通过「MIME 嗅探」猜测资源类型（存在安全风险）。为禁止此行为，可搭配头部：

1	`X-Content-Type-Options: nosniff`

该配置强制浏览器严格遵循 Content-Type 声明的类型解析资源，避免解析异常或安全问题。

二、Content-Type 基本语法

语法格式

1	`Content-Type: [type]/[subtype]; [parameter]`

type：主类型（如 text、application、multipart）；
subtype：子类型（如 html、json、form-data）；
parameter：可选参数（如 charset=utf-8、boundary=xxx）。

基础示例

# 返回 UTF-8 编码的 HTML 页面（响应头）
Content-Type: text/html; charset=utf-8

# 发送表单+文件数据（请求头）
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

三、常见 Content-Type 详解（附使用场景+示例）

1. multipart/form-data：表单+文件上传（最常用）

核心特点

支持同时上传「字符串、文件、二进制数据（Blob）」，是表单上传文件的唯一标准类型；
需通过 boundary 参数分隔不同字段（浏览器/FormData 会自动生成，无需手动配置）；
FormData 对象的字段类型自动转换：非 Blob/File 类型会转为字符串。

适用场景

包含文件上传的表单（如头像上传、附件提交）；
需要同时发送字符串+二进制数据的 POST/PUT 请求。

代码示例（前端原生 JS）

// 1. 创建 FormData 对象
const formData = new FormData();

// 2. 添加不同类型的字段
formData.append("username", "Groucho"); // 字符串（直接添加）
formData.append("accountnum", 123456); // 数字 → 自动转为字符串 "123456"
formData.append("userfile", fileInputElement.files[0]); // 从<input type="file">获取文件

// 3. 手动创建 Blob 并上传（模拟文件）
const xmlContent = '<a id="a"><b id="b">hey!</b></a>';
const blob = new Blob([xmlContent], { type: "text/xml" }); // 定义 Blob 类型
formData.append("webmasterfile", blob);

// 4. 发送 POST 请求（浏览器自动设置 Content-Type 为 multipart/form-data + 自动生成 boundary）
const request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData); // 无需手动设置 Content-Type，FormData 会自动处理

2. application/x-www-form-urlencoded：纯文本表单提交

核心特点

将表单数据转换为「键值对字符串」（如 a=1&b=2&c=张三）；
不支持文件上传，仅能传输字符串，且特殊字符（如中文、空格）会自动 URL 编码。

适用场景

无文件上传的简单表单提交（如登录、注册表单）；
需兼容低版本浏览器的表单请求。

代码示例

// 1. 手动拼接键值对（或通过表单序列化）
const formData = "username=Groucho&accountnum=123456&nickname=张三";

// 2. 发送 POST 请求（需手动设置 Content-Type）
const request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(formData);

3. application/octet-stream：二进制数据上传

核心特点

表示「任意二进制数据」，无键值结构，仅能传输单个二进制文件；
服务器无法区分多个字段，仅适用于纯文件上传场景。

适用场景

单独上传一个二进制文件（如图片、视频、压缩包）；
不需要区分字段的纯二进制数据传输。

注意事项

一次请求只能上传一个文件，无法同时传输文件+字符串；

前端需手动将文件转为二进制流发送，示例：

const file = fileInputElement.files[0];
const request = new XMLHttpRequest();
request.open("POST", "http://foo.com/uploadfile.php");
request.setRequestHeader("Content-Type", "application/octet-stream");
request.send(file); // 直接发送文件二进制数据

4. application/json：JSON 数据传输

核心特点

表示请求/响应数据为 JSON 格式字符串，是前后端接口通信的主流类型；
支持复杂数据结构（对象、数组），需确保数据为合法 JSON 字符串。

适用场景

前后端 API 交互（如列表查询、数据提交）；
传输复杂结构化数据（替代 x-www-form-urlencoded）。

代码示例

// 1. 定义 JSON 数据
const data = {
  username: "Groucho",
  accountnum: 123456,
  hobbies: ["coding", "reading"]
};

// 2. 发送 POST 请求（需手动设置 Content-Type + 转为 JSON 字符串）
const request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitjson.php");
request.setRequestHeader("Content-Type", "application/json");
request.send(JSON.stringify(data)); // 关键：转为 JSON 字符串

5. raw：任意文本类型传输

核心特点

「非标准 MIME 类型」（通常是工具/框架的统称），表示传输任意格式的纯文本；
支持的格式：text/plain（纯文本）、text/xml（XML）、text/html（HTML）、application/javascript（JS 代码）等。

适用场景

传输 XML 配置、HTML 片段、原生 JS 代码等文本数据；
需自定义文本格式的请求（如自定义协议的文本数据）。

代码示例（传输 XML 文本）

const xmlText = '<?xml version="1.0"?><user><name>Groucho</name></user>';
const request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitxml.php");
request.setRequestHeader("Content-Type", "text/xml"); // 明确文本类型
request.send(xmlText);

四、关键注意事项

FormData 自动适配 Content-Type：使用 new FormData() 发送请求时，浏览器会自动设置 Content-Type 为 multipart/form-data 并生成 boundary，无需手动配置（手动配置反而可能导致请求异常）；
MIME 类型嗅探风险：部分浏览器会忽略 Content-Type 声明，通过内容本身猜测类型，需添加 X-Content-Type-Options: nosniff 禁止此行为；
类型选型原则：
- 有文件上传 → 必选 multipart/form-data；
- 纯文本表单 → application/x-www-form-urlencoded；
- 前后端 JSON 交互 → application/json；
- 单个二进制文件 → application/octet-stream；
- 自定义文本格式 → 对应 raw 类型（如 text/xml、text/plain）。

五、参考资料

MDN FormData 使用文档：https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
MDN HTTP POST 方法：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/POST
MDN MIME 类型详解：https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
菜鸟教程 HTTP Content-Type：https://www.runoob.com/http/http-content-type.html
MIME 类型参考工具：https://tool.oschina.net/commons
CSDN Content-Type 实战解析：https://blog.csdn.net/ye1992/article/details/49998511

总结

关键点回顾

Content-Type 核心作用是声明 HTTP 数据的 MIME 类型，区分「请求头（告诉服务器数据类型）」和「响应头（告诉客户端数据类型）」；
不同场景选型核心：文件上传用 multipart/form-data，JSON 交互用 application/json，纯表单用 x-www-form-urlencoded；
FormData 是 multipart/form-data 的最佳实践，浏览器会自动处理边界符和类型声明，无需手动配置；
为避免 MIME 嗅探问题，建议搭配 X-Content-Type-Options: nosniff 头部。

掌握 Content-Type 的正确使用，是保证前后端数据传输格式一致、避免接口异常的核心前提，不同场景的精准选型可大幅降低接口调试成本。

#HTTP #Content-Type

HTTP协议：Content-Type

https://cszy.top/20201228-HTTP-Content-Type/

作者

csorz

发布于

2020年12月28日

许可协议

前端自动化测试上一篇

Javascript中的二进制数据下一篇