MIME 类型与 Content-Type 完全参考指南
每当您的浏览器向 Web 服务器请求文件时，服务器不仅会发送位和字节。它还会发送一个“标签”，告诉浏览器这是什么类型的文件。这个标签被称为 MIME 类型（多用途互联网邮件扩展），它通过 Content-Type HTTP 标头发送。
如果服务器发送了错误的 MIME 类型，您的浏览器可能会尝试下载视频而不是播放它，或者出于安全原因拒绝执行脚本。
快速参考表：常见 MIME 类型
| MIME 类型 | 常见扩展名 | 类别 | 用途 |
|---|---|---|---|
text/html |
.html, .htm |
网页 | 标准网页内容 |
text/css |
.css |
样式 | 层叠样式表 |
application/javascript |
.js |
逻辑 | Web 应用程序脚本 |
application/json |
.json |
数据 | API 的结构化数据 |
application/xml |
.xml |
数据 | 可扩展标记语言 |
text/csv |
.csv |
数据 | 逗号分隔值 |
image/webp |
.webp |
媒体 | 现代压缩图像格式 |
image/avif |
.avif |
媒体 | 高效图像格式 |
font/woff2 |
.woff2 |
字体 | 现代 Web 字体格式 |
application/wasm |
.wasm |
编译 | WebAssembly 二进制代码 |
application/octet-stream |
.bin, .exe |
二进制 | 通用二进制数据（通常触发下载） |
multipart/form-data |
N/A | 上传 | 用于提交包含文件上传的表单 |
1. 结构化数据和 API
现代 Web 应用程序严重依赖这些类型在前端和后端之间交换信息。
- application/json: REST API 的行业标准。它很轻量，并且由 JavaScript 原生支持。
- application/xml: 一种较旧但更强大的格式，支持自定义架构和复杂的验证。
- text/csv: 常用于从数据库或电子表格导出大型数据集。
2. 媒体和资产
为了确保快速加载，服务器必须正确识别现代、高压缩的媒体格式。
- image/webp & image/avif: 这些现代格式提供的压缩率比 JPEG 或 PNG 好得多。如果您的服务器没有发送正确的 MIME 类型，浏览器可能无法正确渲染图像。
- font/woff2: 对 Web 字体至关重要。正确的 MIME 类型确保浏览器可以快速解压缩字体。
3. 专用数据和二进制数据
- application/wasm: 这是 WebAssembly 工作所必需的。浏览器的要求非常严格——如果服务器没有明确发送
application/wasmContent-Type，它们通常会拒绝编译 WASM 模块。 - application/octet-stream: 这是二进制数据的“保底”类型。如果服务器不知道文件是什么，通常默认为此类型。浏览器将其视为下载文件的信号，而不是尝试显示它。
4. 表单和上传
当您在网站上提交表单时，浏览器会使用特定的 MIME 类型对您的输入进行编码。
- application/x-www-form-urlencoded: 简单文本表单的默认类型。它看起来像 URL 查询字符串（
name=John&age=30）。 - multipart/form-data: 当您的表单包含文件上传时，这是必需的。它允许浏览器在单个请求中发送不同类型的数据（文本和二进制文件），并由“边界”分隔。
如何检查文件的 MIME 类型
- 在浏览器中: 打开开发者工具 -> 网络（Network）标签页。点击一个请求，在“响应标头”（Response Headers）部分查找“Content-Type”。
- 在 Linux / macOS 上: 使用带有
--mime-type标志的file命令：file --mime-type -b my-image.webp # 输出: image/webp
常见问题 (FAQ)
问：如果服务器发送了错误的 Content-Type 会怎样？
答： 浏览器通常会执行“MIME 嗅探”（MIME Sniffing）来尝试猜测正确的类型。然而，出于安全原因（例如防止 XSS 攻击），现代浏览器变得越来越严格。如果脚本以 text/plain 而不是 application/javascript 发送，大多数浏览器将拒绝执行它。
问：application/javascript 是 JS 文件的唯一正确类型吗？
答： 从历史上看，人们使用 text/javascript 或 application/x-javascript。虽然 application/javascript 曾是正式建议，但最新标准实际上已转回更倾向于 text/javascript。大多数服务器和浏览器都能很好地处理这两者。
问：为什么我会收到“No 'Content-Type' header”错误？
答： 这意味着服务器没有提供有关文件类型的任何信息。浏览器通常会默认为 text/plain 或 application/octet-stream，这可能会导致页面渲染不正确或触发不必要的下载。
Tool3M 上的相关工具
- Base64 编解码器: 将二进制数据转换为数据 URI（包含 MIME 类型），以便在 HTML 或 CSS 中使用。
- JSON 格式化工具: 验证并格式化您的
application/json数据。