Quasar Dev经Nginx反向代理频繁自动刷新，如何解决？

核心原因 #

1. WebSocket未被代理：Quasar开发模式依赖Webpack Dev Server的WebSocket实现热重载，Nginx默认不会代理WebSocket请求，导致客户端无法与Dev Server建立稳定的实时连接，触发页面反复刷新。
2. 缺失代理请求头：Dev Server需要正确的Host、X-Forwarded系列头信息来识别请求来源，否则可能导致资源路径判断错误，引发不必要的页面重载。

解决方案 #

1. 更新Nginx代理配置 #

修改proxy.conf，添加WebSocket代理支持和必要请求头：

server {
    listen 80;
    charset utf-8;

    location / {
        proxy_pass http://ui:9000;
        
        # 传递真实请求头，确保Dev Server识别来源
        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;

        # WebSocket代理核心配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        # 延长超时时间，避免连接过早断开
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }
}

2. 调整Quasar Dev Server配置 #

修改quasar.config.js的devServer部分，适配代理环境：

devServer: {
  open: true,
  hot: true,
  liveReload: true,
  allowedHosts: 'all', // 允许代理服务器的请求访问
  client: {
    // 配置客户端WebSocket连接地址为Nginx对外的地址
    webSocketURL: {
      hostname: 'localhost',
      port: 9876,
      pathname: '/ws',
    },
  },
}

3. 验证操作 #

• 重启Nginx容器：docker-compose restart proxy
• 重启Quasar容器：docker-compose restart ui
• 访问http://localhost:9876，检查页面是否停止频繁刷新，热重载功能是否正常工作。

注：之前关闭hot和liveReload无效的原因是，即使禁用热重载，Dev Server仍会因WebSocket连接失败触发页面重试刷新，解决代理的WebSocket问题才是根本。

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