项目背景

在接手其他人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

(版权所有,转载请注明出处)

Logo

前往低代码交流专区

更多推荐