首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue用nginx反向代理WebSocket请求地址

vue项目怎样用nginx反向代理WebSocket请求地址

2023-09-26 10:42:58 作者：小Qiao

这篇文章主要介绍了vue项目怎样用nginx反向代理WebSocket请求地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue用nginx反向代理WebSocket请求地址

原因

在VUE项目中使用WebSocket时，是将IP与端口进行固定，但是当环境地址发生变更时，就需要在代码中进行修改，并重新打包发布版本，很是麻烦，当然这样也是不可取的。

因此使用nginx反向代理WebSocket就可以解决这个问题。

VUE项目代码片段

<script>
    export default {
        data(){
            return {
                webSocket: null
            }
        },
        mounted(){
            this.initWebSocket();
        },
        methods:{
            initWebSocket(){
                let vm = this;
                let wsServer = `${location.protocol === 'https' ? 'wss' : 'ws'}://${location.host}/websocket`;
                vm.webSocket = new WebSocket(wsServer);
                vm.webSocket.onopen = function(event) {
                };
                vm.webSocket.onmessage = function(msg) {
                };
                vm.webSocket.onClose = function(msg) {
                };
                vm.webSocket.onError = function(err) {
                }
            }
        }
    }
</script>

nginx文件配置

events {
    worker_connections  1024;  ## Default: 1024
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }
    server {
        listen       9001;
        server_name  localhost;
        location / {
            root   D:/code/ai-village-html/dist/;
            index  index.html index.htm;
        }
        #nginx配置websocket
        location ^~ /websocket {
            proxy_pass http://192.168.1.11:8088; #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;
            proxy_set_header Connection Upgrade;
        }
        location ^~/proxy{
            rewrite ^/proxy/(.*)$ /$1 break; #代理字符串
            proxy_pass http://192.168.1.11:8088; #需要代理的地址
        }
    }
}

这样就可以方便、快捷实现在发生环境改变不改动代码的情况下对WebSocket请求进行配置！

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;
  }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。