如何解决服务器返回text/plain MIME类型问题？Module Federation+Nginx场景

核心问题在于Nginx未正确识别.mjs文件的MIME类型，导致浏览器将其视为text/plain——而ES模块要求必须以application/javascript（或同类规范类型）返回才能正常加载。你之前添加types块的方式有误，直接添加会覆盖include /etc/nginx/mime.types引入的默认MIME配置，导致其他文件类型（如.css、.html）的MIME类型丢失，进而引发新错误。

1. 正确配置Nginx的MIME类型 #

不要直接替换整个types配置，而是在http块中补充.mjs的类型，或修改默认的mime.types文件：

方式一：在现有配置中补充 #

修改Nginx主配置文件，在include /etc/nginx/mime.types;之后添加补充规则：

events{}
http {
    include /etc/nginx/mime.types;
    # 补充mjs文件的MIME类型
    types {
        application/javascript mjs;
    }
    # 兜底默认类型（防止未匹配到的文件类型出错）
    default_type application/octet-stream;

    server {
        listen 80;
        # 完善CORS配置，避免模块联邦跨域隐性问题
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
        add_header Access-Control-Allow-Headers Content-Type;
        
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;
        
        location / {
            try_files $uri $uri/ /index.html;
        }
        # 针对模块联邦入口文件的缓存优化（可选）
        location ~* \.(mjs|js)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

方式二：修改Nginx默认mime.types文件 #

进入Nginx容器，编辑/etc/nginx/mime.types，在application/javascript条目后添加.mjs：

application/javascript js mjs;

这种方式无需修改主配置，更贴合Nginx的默认配置规范。

2. 确保所有微前端容器的配置生效 #

每个微前端都有独立的Docker容器，需确认每个容器的Nginx配置都完成了上述修改：

• 检查微前端项目中的nginx.conf文件，确保包含正确的MIME配置
• 重新构建镜像并重启容器：

docker build -t your-mfe-image .
docker run -d -p 808x:80 your-mfe-image

3. 修复添加types块后的遗留问题 #

如果之前因覆盖types导致其他文件MIME错误，修正配置后需：

• 强制清空浏览器缓存（Ctrl+Shift+R）
• 检查网络请求中所有静态文件的Content-Type响应头，确保.html为text/html、.css为text/css、.mjs为application/javascript

• 不要修改本地Windows注册表：MIME类型由服务器（Nginx）返回，本地注册表不影响服务器端的响应头。
• 模块联邦的remoteEntry.mjs涉及跨域时，必须确保CORS配置完整，避免隐性的跨域加载失败。

内容的提问来源于stack exchange，提问作者Kimi95