如何配置Nginx适配Angular热重载 解决wss连接失败问题

你的Nginx配置存在3个直接导致WSS连接失败的问题：

• 路径匹配规则写死了末尾斜杠：location ^~ /ws/仅能匹配/ws/xxx格式的路径，而浏览器发起的WebSocket请求地址为wss://dev.domain.com/ws（无末尾斜杠），该请求不会命中专属WS代理规则，会落入根路径代理逻辑。
• 代理头缺失关键字段：根路径代理块未配置Host、X-Forwarded-Proto头，WebSocket握手阶段会被webpack-dev-server的主机校验拦截，同时服务端无法感知外层是HTTPS协议，会返回错误的非加密WS连接地址。
• 冗余规则干扰匹配：你同时保留了旧版sockjs-node路径规则和新版/ws规则，Angular 11及以上版本的webpack-dev-server默认已弃用sockjs-node，改用/ws作为WebSocket通信路径，多余规则会提高匹配排查成本。

1. 替换Nginx配置 #

删除原有三个location块，替换为以下配置：

# 精确匹配无斜杠的/ws WebSocket握手请求
location = /ws {
    proxy_pass http://localhost:4200;
    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-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;
    # 延长WebSocket空闲超时，避免开发时无操作自动断开
    proxy_read_timeout 86400;
}

# 代理所有常规页面资源请求
location / {
    proxy_pass http://localhost:4200;
    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-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;
}

2. （可选，若改完Nginx仍异常时配置）修正Angular启动参数 #

启动ng serve时追加参数，强制webpack-dev-server生成正确的公网连接地址：

ng serve --host 0.0.0.0 --public-host dev.domain.com --disable-host-check

如果需要永久生效，可将参数写入angular.json对应项目的serve配置项：

"serve": {
  "options": {
    "host": "0.0.0.0",
    "publicHost": "dev.domain.com",
    "disableHostCheck": true
  }
}

3. 生效配置 #

依次执行以下命令重载Nginx，重启Angular开发服务后强制刷新浏览器（Ctrl+Shift+R清空缓存）即可：

# 验证Nginx配置语法是否正确
nginx -t
# 重载Nginx配置
nginx -s reload

操作完成后WebSocket连接可正常建立，热重载功能恢复。

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