如何手动设置 types 块以纠正浏览器对非标准后缀静态资源的 MIME 类型识别问题？

本文共计754个文字，预计阅读时间需要4分钟。

在Nginx配置中使用`types`块进行MIME映射是一种高效、可控的方式。关键不是简单地加一行就生效，而是涉及位置、语法、覆盖逻辑——错误配置可能导致规则被屏蔽或完全无效。

types 块必须放在正确的作用域里

它只在 http、server 或 location 块内有效，但效果不同：

• 放在 http 块：全局生效，所有 server 都继承（推荐用于通用类型，如 .webp、.woff2）
• 放在 server 块：仅对该站点生效，适合定制化需求（比如某项目用了 .tsv 数据文件，需设为 text/tab-separated-values）
• 放在 location 块：仅对该路径下的静态请求生效，但要注意——types 在 location 内不会自动合并父级映射，容易导致其他后缀失配（例如只写 types { application/wasm wasm; }，会丢失 .js、.css 等默认类型）

语法必须严格遵循格式

每一行是一个完整映射，左侧是 MIME 类型，右侧是空格分隔的一个或多个扩展名，结尾必须有分号：

• ✅ 正确：application/javascript mjs;
• ✅ 正确：font/woff2 woff2 woff;（同一类型支持多个后缀）
• ❌ 错误：application/javascript .mjs;（不能带点）
• ❌ 错误：application/javascript mjs（缺分号）
• ❌ 错误：types { ... } 嵌套在另一个 types 块里（Nginx 不支持嵌套）

确保你的定义能真正覆盖默认行为

Nginx 加载顺序决定谁胜出：后加载的同名扩展名映射会覆盖先加载的。所以要注意引入顺序：

• 如果用了 include mime.types;，你的自定义 types 块必须写在它之后，才能覆盖默认值
• 不要删掉 include mime.types;，否则会丢失几百个常见类型（如 .png、.svg），得不偿失
• 若用自定义文件（如 custom.mime.types），也要保证 include 它的位置在默认 mime.types 之后

验证是否生效的三步检查法

改完别急着重载，先确认底层逻辑没出错：

• 运行 sudo nginx -t：检查语法是否合法，特别是括号匹配和分号缺失
• 用 curl -I https://yoursite.com/test.mjs 查看响应头中的 Content-Type 是否为你设定的值
• 打开浏览器开发者工具 → Network → 找对应资源 → 检查 Header 里的 Content-Type，同时留意 Console 是否还有 MIME 相关警告（如 “strict MIME type checking is enforced”）