Nuxt3+Vite+Docker+Nginx环境net::err_empty_response报错求助

针对你遇到的每秒net::ERR_EMPTY_RESPONSE报错、端口映射后页面持续重载的问题，核心原因是HMR的WebSocket请求未正确通过Nginx代理，以及Nuxt未正确识别前端实际访问的端口。以下是具体解决步骤：

1. 调整Nuxt3配置 #

修改项目根目录的nuxt.config.ts，直接在Nuxt配置里指定Vite的HMR参数，无需单独创建vite.config.js：

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        clientPort: 80, // 前端实际访问的端口（Nginx监听的80端口）
        protocol: 'ws',
        host: 'localhost'
      }
    }
  }
})

这里的关键是让Nuxt知道，前端是通过80端口访问的，HMR的WebSocket请求要指向80端口，而非Nuxt服务本身的3000端口。

2. 修正Nginx反向代理配置 #

在Nginx的server块中，新增专门处理HMR WebSocket请求的location，同时确保常规请求的代理配置正确：

server {
  listen 80;
  server_name localhost;

  # 处理页面静态资源和普通请求，转发到Nuxt的3000服务
  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

  # 关键：代理HMR的WebSocket请求，必须配置HTTP/1.1和升级头
  location /__vite_hmr {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

  # 处理API请求，转发到你的PHP服务端口（示例为9000，根据实际修改）
  location /api {
    proxy_pass http://localhost:9000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

3. 问题根源说明 #

• 之前固定Vite端口3000但未配置HMR的clientPort，导致HMR请求直接尝试连接3000端口，要么被Nginx拦截出现空响应，要么端口映射错误触发循环转发，导致页面持续重载。
• 参考GitHub issue时未配置WebSocket的升级头，HMR握手失败后页面会不断尝试重新连接，引发持续重载。

4. 验证步骤 #

1. 重启Nginx：sudo nginx -s reload
2. 重启Nuxt开发服务：npx nuxi dev
3. 打开浏览器控制台，切换到Network的WS标签，确认ws://localhost/__vite_hmr连接成功，无报错。

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