vue与nginx配置websocket反代

vue配置websocket反代

创建连接

this.url = `ws://${location.host}/UMS-CLUSTER-WS/websocket/test` // 使用location.host的目的是在当前项目运行的域名和端口号下发起ws连接，例如本地为localhost:80
new WebSocket(this.url) // 创建连接

config配置

vue.config.js的反代中进行如下配置

proxy: {
      '/WS': {
        target: clusterWsServer, // 后台线上环境地址
        pathRewrite: { '^/WS': '' },
        ws: true,
        changeOrigin: true
      }
    }

nginx配置websocket反代

  #nginx配置websocket
  location /WS/ {
        proxy_pass  http://****:8666/; #websocket线上后台地址
        proxy_http_version    1.1;
        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_read_timeout    120s;
        proxy_set_header      Upgrade           websocket; #配置连接方式为websocket
        proxy_set_header      Connection        Upgrade;
  }