前后分离的 Web 架构应用，在开发环境启动是可以直接连接支持 websocket 协议，因为没有中间件做转发处理。

当我们对前端进行编译后，通过 nginx 反向代理访问时，需要在nginx 配置文件中增加一些特定的头信息，让服务端识别 websoket 协议并握手成功。

核心配置如下：

location /ws/ {
        
    proxy_http_version 1.1;
    proxy_set_header Origin "";
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header Host $http_host;
    proxy_pass http://172.101.101.101:8080;
}