vue項目怎樣用nginx反向代理WebSocket請求地址

更新時間：2023年09月26日 10:42:58 作者：小Qiao

這篇文章主要介紹了vue項目怎樣用nginx反向代理WebSocket請求地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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

原因

在VUE項目中使用WebSocket時，是將IP與端口進(jìn)行固定，但是當(dāng)環(huán)境地址發(fā)生變更時，就需要在代碼中進(jìn)行修改，并重新打包發(fā)布版本，很是麻煩，當(dāng)然這樣也是不可取的。

因此使用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; #需要代理的地址
        }
    }
}

這樣就可以方便、快捷實現(xiàn)在發(fā)生環(huán)境改變不改動代碼的情況下對WebSocket請求進(jìn)行配置！

vue與nginx配置websocket反代

vue配置websocket反代

創(chuàng)建連接

this.url = `ws://${location.host}/UMS-CLUSTER-WS/websocket/test` // 使用location.host的目的是在當(dāng)前項目運行的域名和端口號下發(fā)起ws連接，例如本地為localhost:80
new WebSocket(this.url) // 創(chuàng)建連接

config配置

vue.config.js的反代中進(jìn)行如下配置

proxy: {
? ? ? '/WS': {
? ? ? ? target: clusterWsServer, // 后臺線上環(huán)境地址
? ? ? ? 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;
? }