如何给websocket配置代理

一、前言

最近在工作中遇到websockt代理问题，领导不想让socket地址写死，需要动态配置。

一般socket地址

let wsUrl = ws://IP地址:端口号/xxxx
const socket = new WebSocket(wsUrl);

代理socket地址

const wsUrl = `ws://${location.host}/wsUrl/xxx`;  // 动态获取地址
const socket = new WebSocket(wsUrl); // 创建连接

这里的wsUrl可以是任意字符，只做代理使用，用户请求拦截标识，实际请求要去掉它。

二、vite.config.js配置

server: {
    ...
    proxy: {
      '/wsUrl': {
        target:'ws://socket地址',  //这里是后台ws访问地址
        changeOrigin: true, //允许跨域设置
        ws: true, //websocket代理设置
        rewrite: (path) => path.replace(/^\/wsUrl/, '') //拦截路径去除
      },
}

注意: 这里需要使用rewrite去掉代理标识，因为这在实际的websockt地址中是不存在的！

三、在nginx中配置

...
http:{
  ...
  server{
    ...
    location /wsUrl/ {
      rewrite ^/wsUrl/(.*)$ /$1 break; #拦截标识去除
      proxy_pass http://socket服务地址; #这里是http不是ws，不用怀疑，代理的ip和port写ws访问的实际地址
      proxy_http_version 1.1; #这里必须使用http 1.1
      #下面两个必须设置，请求头设置为ws请求方式
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
    ...
  }
  ...
}