【网络协议系列】Content-Type
是 HTTP 协议中的一个头部字段，用于指示资源的媒体类型（MIME 类型），告诉客户端（如浏览器）或服务器如何正确处理传输的数据。简单来说，它回答了“我发送/接收的到底是什么格式的数据？”这个问题。如果没有正确的 Content-Type，浏览器可能无法正确显示页面，服务器也无法解析客户端上传的数据。内容类型常用场景请求体示例现代 API 交互HTML 表单提交（无文件）表单提交（含文件）由边界
博客目录
1. 什么是 Content-Type？
Content-Type 是 HTTP 协议中的一个头部字段，用于指示资源的媒体类型（MIME 类型），告诉客户端（如浏览器）或服务器如何正确处理传输的数据。
简单来说，它回答了“我发送/接收的到底是什么格式的数据？”这个问题。如果没有正确的 Content-Type，浏览器可能无法正确显示页面，服务器也无法解析客户端上传的数据。
2. Content-Type 的语法结构
Content-Type 的值通常由三部分组成，但最常见的只有前两部分：
Content-Type: <type>/<subtype>; charset=<charset>
- type： 主类型，表示数据的大类别。
- subtype： 子类型，表示该类别下的具体格式。
- charset： 可选的参数，用于指定字符编码。最常用的是
charset=utf-8。
3. 常见的 Content-Type 种类
下面按照数据类型分类，列出一些最常用的 Content-Type。
文本类型 (text/)
text/html： 最常用的类型，用于 HTML 页面。- 示例：
Content-Type: text/html; charset=utf-8
- 示例：
text/plain： 纯文本，不包含任何格式。- 示例：
Content-Type: text/plain
- 示例：
text/css： CSS 样式表文件。- 示例：
Content-Type: text/css; charset=utf-8
- 示例：
应用类型 (application/)
这类通常用于二进制数据或由特定应用程序处理的格式。
application/json： 现代 Web API 最常用的数据交换格式。- 示例：
Content-Type: application/json; charset=utf-8 - 请求体示例：
{"name": "John", "age": 30}
- 示例：
application/x-www-form-urlencoded： HTML 表单默认的提交方式。数据被编码成键值对，格式类似key1=value1&key2=value2。- 示例：
Content-Type: application/x-www-form-urlencoded - 请求体示例：
username=admin&password=123456
- 示例：
multipart/form-data： 另一个常见的表单提交方式，主要用于上传文件。它会将表单数据分成多个部分，每个部分对应一个字段。- 示例：
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
- 示例：
application/xml： XML 数据。- 示例：
Content-Type: application/xml
- 示例：
application/pdf： PDF 文件。application/octet-stream： 任意的二进制数据流。当不知道具体类型或只是一个二进制下载时使用。浏览器通常会将其识别为需要下载的文件。
图像类型 (image/)
image/jpeg： JPEG 图片。image/png： PNG 图片。image/gif： GIF 图片。image/svg+xml： SVG 矢量图。
音频/视频类型 (audio/, video/)
audio/mpeg： MP3 音频。video/mp4： MP4 视频。
4. 关键场景中的使用
A. 在服务器响应中 (Server Response)
当服务器返回数据时，设置正确的 Content-Type 至关重要，它决定了浏览器如何渲染内容。
-
返回 HTML 页面：
HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 -
返回 JSON API 数据：
HTTP/1.1 200 OK Content-Type: application/json; charset=utf-8 {"status": "success", "data": ...} -
返回一个图片文件：
HTTP/1.1 200 OK Content-Type: image/png -
触发文件下载：
HTTP/1.1 200 OK Content-Type: application/octet-stream Content-Disposition: attachment; filename="report.pdf"
B. 在客户端请求中 (Client Request)
当客户端（如浏览器、Ajax 请求）向服务器发送数据时，也需要通过 Content-Type 告知服务器数据的格式。
-
提交普通表单（默认方式）：
POST /submit-form HTTP/1.1 Content-Type: application/x-www-form-urlencoded username=admin&password=123456 -
提交带文件上传的表单：
POST /upload HTTP/1.1 Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW ------WebKitFormBoundary7MA4YWxkTrZu0gW Content-Disposition: form-data; name="description" My Holiday Photo ------WebKitFormBoundary7MA4YWxkTrZu0gW Content-Disposition: form-data; name="file"; filename="photo.jpg" Content-Type: image/jpeg ... (这里是 photo.jpg 的二进制数据) ... ------WebKitFormBoundary7MA4YWxkTrZu0gW-- -
通过 Ajax (Fetch/axios) 发送 JSON 数据：
fetch("/api/users", { method: "POST", headers: { "Content-Type": "application/json", // 必须明确设置 }, body: JSON.stringify({ name: "John", job: "Developer", }), });
5. 总结与常见误区
| 内容类型 | 常用场景 | 请求体示例 |
|---|---|---|
application/json |
现代 API 交互 | {"key": "value"} |
application/x-www-form-urlencoded |
HTML 表单提交（无文件） | key1=value1&key2=value2 |
multipart/form-data |
表单提交（含文件） | 由边界分隔的多部分数据 |
text/html |
服务器返回 HTML 页面 | <html>...</html> |
常见误区：
- 混淆
application/json和x-www-form-urlencoded：- 在 Ajax 请求中，如果你用
JSON.stringify()创建了请求体，但将Content-Type设置为x-www-form-urlencoded，服务器将无法正确解析，反之亦然。
- 在 Ajax 请求中，如果你用
- 忘记设置
charset=utf-8：- 对于文本类内容（如
text/html,application/json），如果包含中文等非 ASCII 字符，强烈建议加上charset=utf-8，否则可能出现乱码。
- 对于文本类内容（如
觉得有用的话点个赞
👍🏻呗。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
56
0- 0
已为社区贡献55条内容
所有评论(0)