项目背景

在接手其他人angular项目时(vue.js可能也会遇到此问题)，为了解决跨域前端配置了nginx，项目启动后，后台ws报错，如下图所示：

问题定位：

上网查找报错原因，发现sockjs-node为nodejs热加载用于浏览器和本地通信的接口，此时热加载功能失效。因此判断错误原因为：此通信接口访问到的是nginx代理的9097端口而不是实际服务启动的8082端口，因此无法进行通信。

解决方案：

在nginx上配置对此9097端口进行配置，让/sockjs-node其能够正常代理到本机实际端口上，从而解决问题。
具体措施：
在nginx中增加nginx配置

http {
    include       mime.types;
    default_type  application/octet-stream;
    map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
  }
 server {
        listen 9097;
        server_name localhost;

	location /sockjs-node {
            proxy_pass http://0.0.0.0:8082;
	    proxy_set_header Upgrade $http_upgrade;
	    proxy_set_header Connection $connection_upgrade;
        }
    }

注：以上内容最重要的就是在反向代理的配置中增加了如下两行，其它的部分和普通的HTTP反向代理没有任何差别。
roxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
这里面的关键部分在于HTTP的请求中多了如下头部：
Upgrade: websocket
Connection: Upgrade
这两个字段表示请求服务器升级协议为WebSocket。

结语

实际情况中，/sockjs-node报错原因可能有很多，还可能是shadowsock代理、nodejs配置等，只要了解问题本质，正确的让ws访问到本地实际的地址即可。
参考文献：
https://www.hi-linux.com/posts/42176.html

（版权所有，转载请注明出处）