一招破局！为 `.mjs` 等自定义扩展名优雅添加 MIME 映射（附 http-server 实战指南）
本地开发时，浏览器突然报错：
Failed to load module script: The server responded with a non-JavaScript MIME type of 'text/plain'？别慌，问题可能出在 MIME 映射上。
一、当浏览器“看不懂”你的.mjs文件
上周帮同事排查一个奇怪的问题：本地用http-server启动静态服务，HTML 中引入<script type="module" src="main.mjs"></script>，控制台却赫然报错：
Failed to load module script: The server responded with a non-JavaScript MIME type of 'text/plain'代码逻辑无误，网络请求也成功返回了文件内容——问题竟出在响应头的Content-Type上！服务器将.mjs识别为text/plain，而现代浏览器对 ES 模块脚本有严格要求：MIME 类型必须是 JavaScript 类型（如application/javascript），否则直接拦截执行。
这背后，正是 MIME 映射缺失的典型场景。今天，我们就以.mjs为例，彻底搞懂如何为自定义扩展名“正名”。
二、MIME 映射：服务器与浏览器的“翻译官”
MIME（Multipurpose Internet Mail Extensions）类型是 HTTP 响应头中Content-Type的值，用于告知浏览器“如何解析这份内容”。例如：
.js→application/javascript.css→text/css.png→image/png
若服务器未配置某扩展名的映射（如旧版http-server未内置.mjs），则可能返回text/plain或application/octet-stream，导致浏览器拒绝执行脚本、样式失效等“灵异事件”。
💡 小知识：
.mjs是 ECMAScript 模块的专用扩展名（区别于传统.js），虽非强制，但在明确模块边界、工具链识别时非常实用。浏览器要求其 MIME 类型必须为 JavaScript 类型，否则视为安全风险。
三、破局关键：http-server 的--mime参数
http-server（Node.js 轻量级静态服务器）提供了灵活的 MIME 配置能力。查阅其 官方文档 可知：
--mime：Specify a custom mime.types file. Also, a.mime.typesfile in the served directory will be loaded automatically.
我们有三种实用方案：
✅ 方案一：项目根目录放置.mime.types（推荐！零侵入）
- 在项目根目录创建文件
.mime.types - 添加内容（Apache 风格，空格分隔）：
application/javascript mjs text/wasm wasm application/json geojson - 直接启动服务：
✨ 无需额外参数！http-serverhttp-server会自动加载该文件，优雅又持久。
✅ 方案二：命令行临时注入（快速验证）
# macOS/Linux（单引号包裹 JSON）http-server --mime'{".mjs": "application/javascript"}'# Windows PowerShellhttp-server --mime'{".mjs": "application/javascript"}'# Windows CMD（需转义双引号）http-server --mime"{\".mjs\":\"application/javascript\"}"⚠️ 注意：JSON 键必须带点（
".mjs"），且注意各系统引号转义差异。适合临时调试，不建议长期使用。
✅ 方案三：指定外部配置文件（团队协作友好）
- 创建
custom.mime.json：{".mjs":"application/javascript",".wasm":"application/wasm",".svgz":"image/svg+xml"} - 启动时指定：
http-server --mime custom.mime.json
适合将配置纳入版本管理，写入package.json脚本：
{"scripts":{"dev":"http-server --mime custom.mime.json -o"}}四、避坑指南 & 实战验证
🔍 验证是否生效
- 启动服务后，浏览器访问
.mjs文件 - 打开 DevTools → Network → 查看响应头
Content-Type - 正确应显示：
application/javascript
⚠️ 常见陷阱
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 配置无效 | 键名漏写点（如"mjs"） | 必须写为".mjs" |
| Windows 命令报错 | 引号未转义 | 优先用方案一或方案三 |
| 修改后未生效 | 浏览器缓存 | 强制刷新（Ctrl+Shift+R）或加时间戳参数 |
| 新版 http-server 已内置 | 无需手动配置 | 先测试：http-server -v查看版本（v14.1+ 通常已支持.mjs） |
🌰 举个栗子：若需同时支持 WebAssembly（
.wasm）和自定义地理数据（.geojson），.mime.types内容可扩展为：application/javascript mjs application/wasm wasm application/geo+json geojson
五、不止于 http-server：思维延伸
掌握 MIME 映射原理后，可举一反三：
- Webpack/Vite：通过
devServer.headers或插件配置响应头 - Nginx：在
mime.types中添加types { application/javascript mjs; } - Express：使用
res.type('js')或中间件serve-static配置 - 生产环境：务必在 CDN 或网关层统一配置，避免客户端兼容问题
更重要的是建立意识：当资源加载异常时，先查 Network 面板的 Content-Type——这往往是被忽略的关键线索。
六、结语：小配置，大体验
为.mjs添加 MIME 映射，看似是“一行配置”的小事，却折射出 Web 开发中“协议契约”的重要性：服务器与浏览器通过标准头信息默契协作。掌握这类底层细节，能让你在调试时多一份笃定，少一分焦虑。