你有没有遇到过这种诡异的问题——明明图片文件存在，浏览器就是不显示，弹出一个下载框？或者 JSON 接口返回了数据，前端解析时报错说「Unexpected token」？
大概率是 MIME 类型搞错了。
MIME（Multipurpose Internet Mail Extensions）类型是 HTTP 协议中用来告诉浏览器「这是什么文件」的标签。它藏在 Content-Type 响应头里，决定了浏览器怎么处理服务器返回的数据。
很多开发者觉得 MIME 类型不重要——浏览器这么聪明，自己猜不就完了？但事实是，猜错了的后果很严重：图片不显示、脚本不执行、文件错误下载、甚至触发浏览器的安全策略拦截。
这篇文章从原理到实战，把 MIME 类型讲透，再给你一个完整的速查表。文末还有 navbox 的 MIME 类型查询工具，随时查随时用。
一、MIME 类型的结构一个 MIME 类型由两部分组成，中间用斜杠分隔：
type/subtype
type：大类，比如 text、image、application、audio、videosubtype：具体类型，比如 html、jpeg、javascript举个例子：
Content-Type: text/html
Content-Type: image/png
Content-Type: application/json
如果服务器没有指定 Content-Type，浏览器会收到 application/octet-stream——这就是「通用二进制流」，浏览器会把它当文件下载，而不是直接在页面上展示。
二、最常见的 MIME 类型速查我把开发中 90% 会遇到的 MIME 类型整理成这张表，建议收藏：
2.1 文本类扩展名MIME 类型说明.html / .htmtext/htmlHTML 网页.csstext/css样式表.jsapplication/javascriptJavaScript（旧浏览器用 text/javascript）.jsonapplication/jsonJSON 数据.xmlapplication/xmlXML 文档.txttext/plain纯文本.csvtext/csvCSV 文件2.2 图像类扩展名MIME 类型说明.jpg / .jpegimage/jpegJPEG 图片.pngimage/pngPNG 图片（支持透明）.gifimage/gifGIF 动图.webpimage/webpWebP 图片（Google 推出）.svgimage/svg+xmlSVG 矢量图.icoimage/x-icon网站图标.avifimage/avifAVIF 图片（新一代格式）.bmpimage/bmpBMP 位图2.3 音视频类扩展名MIME 类型说明.mp4video/mp4MP4 视频.webmvideo/webmWebM 视频.oggvideo/oggOgg 视频.mp3audio/mpegMP3 音频.wavaudio/wavWAV 音频.flacaudio/flacFLAC 无损音频.webaaudio/webmWebM 音频2.4 文档与压缩包扩展名MIME 类型说明.pdfapplication/pdfPDF 文档.zipapplication/zipZIP 压缩包.tarapplication/x-tarTAR 归档.gzapplication/gzipGZIP 压缩.docapplication/mswordWord 文档（旧版）.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.documentWord 文档（新版）.xlsapplication/vnd.ms-excelExcel 文档（旧版）.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheetExcel 文档（新版）2.5 字体类扩展名MIME 类型说明.wofffont/woffWeb 字体.woff2font/woff2Web 字体（压缩率更高）.ttffont/ttfTrueType 字体.otffont/otfOpenType 字体.eotapplication/vnd.ms-fontobjectIE 专用字体2.6 其他重要类型扩展名MIME 类型说明.wasmapplication/wasmWebAssembly 模块.manifesttext/cache-manifestHTML5 离线缓存清单.atomapplication/atom+xmlAtom 订阅源.rssapplication/rss+xmlRSS 订阅源三、MIME 类型错了会怎样？3.1 图片不显示假设你有一张 photo.webp，但服务器返回的 Content-Type 是 application/octet-stream。
浏览器收到后不知道这是什么格式的图片，不会尝试渲染，而是弹出一个下载对话框。用户一脸懵逼：「我点了个预览，你怎么给我下载？」
3.2 JSON 接口被当文本处理后端 API 返回 JSON 数据，但 Content-Type 写成了 text/plain。
前端 fetch().then(res => res.json()) 能拿到数据，但有些框架（比如 Axios）会因为 Content-Type 不是 application/json 而不自动解析 JSON。结果你拿到的是一个字符串，JSON.parse() 又报错。
3.3 脚本不执行JavaScript 文件返回了 text/plain 而不是 application/javascript。
浏览器不会执行这段脚本，页面上的交互功能全部失效。如果你还配了 CSP（内容安全策略），脚本可能被直接拦截。
3.4 安全问题MIME 类型错误还可能带来安全风险。比如用户上传了一个 .php 文件，但服务器把它当 image/png 返回了。如果前端直接渲染这个「图片」，恶意 PHP 代码不会执行——但如果服务器配置反过来，把 .php 当普通文件返回，用户访问 URL 时 PHP 就会被执行，这就麻烦了。
四、各服务器配置 MIME 类型的方法4.1 Nginx 配置Nginx 的 MIME 类型定义在 mime.types 文件中。大多数安装已经预配置好了。你可以在 nginx.conf 中看到：
include /etc/nginx/mime.types;
default_type application/octet-stream;
如果需要添加自定义类型，在 server 或 location 块中用 types 指令：
location ~* \.(woff2)$ {
add_header Content-Type "font/woff2";
}
或者全局添加：
types {
application/x-custom-type custom;
}
4.2 Apache 配置Apache 用 AddType 指令配置：
AddType application/json .json
AddType image/webp .webp
AddType font/woff2 .woff2
这些指令可以放在 .htaccess 文件或虚拟主机配置中。
4.3 Node.js / ExpressExpress 自带 MIME 类型映射，基于 mime-types 包。如果需要自定义：
const mime = require('mime-types');
mime.lookup('custom') // 返回 'application/octet-stream'
mime.extension('application/json') // 返回 'json'
4.4 前端开发注意事项作为前端开发者，你通常不需要配置服务器端的 MIME 类型。但有几个场景你会遇到：
本地开发：用 Live Server 或 Vite 时，确保静态文件返回正确的 Content-TypeCDN 配置：七牛云、阿里云 OSS 等对象存储需要手动配置 MIME 类型映射文件上传：上传的文件如果 MIME 类型不对，前端预览会失败五、排查 MIME 类型问题的流程当你怀疑是 MIME 类型出了问题，按这个流程排查：
第一步：检查响应头打开浏览器 DevTools → Network 面板 → 点击出问题的请求 → 查看 Response Headers 中的 Content-Type。
对比你期望的类型和实际返回的类型。不一致就是问题所在。
第二步：确认文件扩展名有时候 Content-Type 对了，但文件名扩展名不对。比如一个 .txt 文件被命名为 data（无扩展名），服务器可能返回 application/octet-stream。
第三步：检查服务器配置如果是 Nginx，检查 mime.types 是否包含需要的类型映射。如果是 Apache，检查 .htaccess 中的 AddType 指令。
第四步：用在线工具验证打开 navbox 的 MIME 类型查询工具，输入文件扩展名，确认标准 MIME 类型是什么。然后跟服务器返回的进行对比。
六、常见扩展名与 MIME 类型的坑坑 1：.js 应该用 application/javascript 还是 text/javascript？RFC 4329 规定 JavaScript 的 MIME 类型应该是 application/javascript。但很多老教程还在用 text/javascript。
实际上现代浏览器两者都支持。但 text/javascript 有个问题：浏览器可能会把它当成可执行的文本，而不是脚本，导致 CSP 策略下的行为不一致。
建议：统一用 application/javascript。
坑 2：.svg 的 MIME 类型SVG 的 MIME 类型是 image/svg+xml，不是 image/svg。少了那个 +xml，浏览器可能无法正确渲染。
坑 3：.json 文件有些服务器默认把 .json 当成 text/plain 返回。如果你直接通过 URL 访问 JSON 文件，浏览器会下载而不是解析。
建议：在服务器配置中显式添加 application/json 映射。
坑 4：.webp 和 .avif这两种是相对较新的图片格式。如果你的服务器版本较旧（比如 Nginx 1.0 之前的版本），可能不认识它们的 MIME 类型。
解决方法：手动在配置中添加：
types {
image/webp webp;
image/avif avif;
}
七、总结MIME 类型是 Web 开发中最容易被忽视、却又无处不在的基础设施。它不性感，但出问题了会很致命。
记住这三个原则：
别猜——服务器返回什么 Content-Type，浏览器就怎么处理查表——不确定就用 navbox MIME 类型查询工具 快速确认测——上线前用 DevTools 检查关键资源的 Content-Type 是否正确下次再遇到「图片不显示」「JSON 解析失败」这类诡异问题，第一反应先看看 Content-Type 对不对。大概率，问题就在那里。