Nginx子目录反向代理下Webpack Dev Server Websocket连接失败求助

问题核心分析 #

当前页面能正常访问，但WebSocket连接失败，主要原因是Nginx的WebSocket转发配置不兼容，以及Webpack Dev Server未正确识别对外访问的子目录路径。

1. 修正Nginx配置 #

修改/docs路由的配置，重点调整WebSocket相关的请求头，避免硬写导致的兼容性问题：

location /docs {
    proxy_pass http://localhost:8000;
    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;
    proxy_set_header Origin $scheme://$host; # 解决跨域校验问题

    # WebSocket 关键配置
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection; # 使用变量而非硬写'upgrade'
    proxy_cache_bypass $http_upgrade; # 确保WebSocket请求不被缓存
}

说明：硬写Connection 'upgrade'会忽略浏览器实际发送的keep-alive, upgrade头，导致握手失败；添加Origin头是为了让Webpack Dev Server通过跨域校验。

2. 调整Webpack Dev Server配置 #

明确告知Webpack对外访问的子目录路径，让它自动生成正确的WebSocket地址：

devServer: {
  public: "mydom.com/docs", // 对外访问的完整域名+子目录（无需协议）
  static: {
    publicPath: "/docs", // 静态资源的基础路径，匹配Nginx的子目录
  },
  client: {
    webSocketURL: "auto", // 自动根据public配置生成WebSocket地址
  },
  host: "0.0.0.0",
  port: 8000,
}

若auto模式仍有问题，可直接指定WebSocket地址：
webSocketURL: "wss://mydom.com/docs/ws"

3. 验证步骤 #

1. 重启Nginx服务：nginx -s reload
2. 重启Webpack Dev Server
3. 打开浏览器控制台，检查WebSocket连接状态，确认无错误提示

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