前端部署后浏览器访问报 MIME 类型错误排查
前端项目部署至服务器后,使用浏览器访问可能遇到如下报错:
Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
此时,开发者往往会首先怀疑 Nginx 配置存在问题。虽然配置确实相关,但这并非根本原因。
错误原因分析
这个错误的真正原因是服务器上缺少了 index.html 引用的第一个 JS 文件。
那为什么不直接报 404,而是出现这种奇怪的 MIME 类型错误呢?
Nginx 配置示例
大多数前端项目在 Nginx 中的标准配置如下:
server {
listen 80;
server_name test.test.cn;
client_max_body_size 10m;
location / {
proxy_set_header Host $http_host;
root /data/html/ysh;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
当浏览器请求一个不存在的 JS 文件时,由于上述配置中的 try_files 指令未匹配到文件,请求最终会落入 @router 重写规则,或者直接由 root 配合 index 逻辑处理(取决于具体版本和配置细节,此处核心在于 try_files 失败后的行为)。在 SPA 应用中,通常配置意图是让所有路由都指向 index.html。
因此,当浏览器尝试加载一个不存在的 JS 模块脚本时,Nginx 并没有返回 404 状态码,而是返回了 index.html 的内容(MIME 类型为 text/html)。浏览器识别到响应内容是 HTML 而非预期的 JavaScript 或 Wasm,便触发了严格 MIME 类型检查机制,从而抛出上述错误。
解决方案
排查此类问题时,除了检查 Nginx 配置外,务必确认服务器上是否存在 index.html 中引用的所有静态资源文件。很多时候,问题的根源仅仅是因为构建产物上传不完整,导致某个关键 JS 文件缺失。

