Docker化Vite React应用：Nginx返回.tsx错误MIME类型问题求助

问题核心 #

你的错误是因为Nginx未正确识别.tsx等ES模块文件的MIME类型，返回了application/octet-stream，不符合浏览器对ES模块脚本的MIME类型要求；同时当前容器内Nginx配置是静态文件服务模式，无法支持Vite开发模式的热更新功能。

解决方案 #

正确配置：容器内Nginx反向代理到Vite开发服务器 #

Vite开发模式依赖自身内置的dev server处理模块编译、热更新（含WebSocket通信），因此容器内Nginx需要将请求转发到Vite dev server，而非直接提供静态文件。修改容器内Nginx配置如下：

server {
    listen 80;
    server_name example.com;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    charset utf-8;

    location / {
        resolver 127.0.0.11;
        # 指向Vite开发服务器的地址和端口（默认5173，若你修改过Vite端口请同步调整）
        set $vite_dev_server http://localhost:5173;
        proxy_pass $vite_dev_server;
        
        # 传递必要的请求头，确保Vite能正确处理请求
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
        
        # 配置WebSocket支持，Vite热更新依赖此通信
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

为什么这能解决问题？ #

1. Vite dev server会自动处理.tsx/.ts等ES模块文件，返回符合要求的application/javascript MIME类型，避免浏览器报错。
2. WebSocket配置保证了热更新的实时通信，满足你对ESNext热开发功能的需求。

补充：静态文件模式的MIME类型修复（不推荐用于开发环境） #

如果因特殊需求必须用Nginx直接提供静态文件，可在容器内Nginx配置的http块或当前server块中添加MIME类型映射，但此方式无法支持Vite热更新：

types {
    application/javascript ts tsx jsx;
}

或修改Nginx的mime.types配置文件，新增：

application/javascript ts tsx;

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