CRA搭配Nginx反向代理时wss类型sockjs-node的WebSocket连接失败如何解决

问题根因 #

该报错是因为Nginx默认没有对WebSocket请求做代理适配，React开发服务器的热重载依赖sockjs-node的WebSocket连接，经过你当前的Nginx反向代理后连接被阻断。

解决步骤 #

第一步：修改Nginx配置

将你现有的Nginx配置替换为如下内容，新增WebSocket代理适配规则：

server {
    listen 80;
    server_name domain.local;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name domain.local;

    ssl_certificate /Temp/Project/Certificate.pem;
    ssl_certificate_key /Temp/Project/Key.pem;

    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;

        # WebSocket代理专用配置
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        # 延长连接超时时间，避免WebSocket频繁断开
        proxy_read_timeout 86400;
    }
}

修改完成后重启Nginx服务即可生效，绝大多数场景完成这一步就能解决热重载失效问题。

第二步：配置React开发服务环境变量（仅修改Nginx后仍失效时执行）

你可以在项目根目录的.env.development文件中添加以下变量，指定热重载WebSocket的连接参数：

WDS_SOCKET_HOST=domain.local
WDS_SOCKET_PORT=443
WDS_SOCKET_PROTOCOL=wss

如果是通过docker-compose启动服务，也可以直接在对应服务的配置块中添加环境变量：

services:
  你的React服务名称:
    # 其余原有配置保持不变
    environment:
      - WDS_SOCKET_HOST=domain.local
      - WDS_SOCKET_PORT=443
      - WDS_SOCKET_PROTOCOL=wss

修改完成后重启React开发服务即可。

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