前端部署后浏览器访问报 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 文件缺失。

前端部署后浏览器访问报 MIME 类型错误排查