webpack dev-server代理websocket問題
webpack dev-server 代理 websocket
在寫東西的時候遇到websocket在開發(fā)中需要代理,并且基于http,部署后利用Nginx代理并使用https的情況,想?yún)f(xié)調(diào)兩種配置但不太會寫。嘗試之后記下來。
首先用到https之后肯定是不能在頁面中直接使用url去訪問各個后端的,因此務(wù)必配置proxy。
proxy
開發(fā)環(huán)境中使用proxy進行多后端轉(zhuǎn)發(fā)配置,轉(zhuǎn)發(fā)表盡量與nginx配置相對應(yīng),方便部署。
下為用到的配置匿名版。
proxyTable: {
//多后端配置
'/a': {
//target: http://xxxxx/xxxxxx
target: config.a_target,//如上一行寫成地址即可
//changeOrigin: true,
pathRewrite: {
'^/a':'/'
}
},
'/b':{
target:config.b_target,
pathRewrite: {
'^/b':'/'
}
},
'/c':{
target: config.c_target,
ws:true,//支持websokcet
changeOrigin: true,
pathRewrite: {
'^/c':'/'
}
},
'/':{
target: config.real_target,
//ws: true,//支持websocket
changeOrigin: true,
pathRewrite: {
}
},websocket
創(chuàng)建websocket時與http請求不同,不能使用/c/前綴直接匹配,而是要使用帶有協(xié)議與地址端口等完整的路徑
代碼如下:
//根據(jù)http協(xié)議判斷是否為ws或wss let proto = document.location.protocol == 'http:'? 'ws:': 'wss:'; //取地址+端口,配置80端口時port是空的,所以判斷一下 let address = document.location.port? document.location.hostname + ':' + document.location.port: document.location.hostname ; //拼接請求地址 const wsuri = proto + "http://" + address + "/c/"+this.robotId; console.log(wsuri); this.websock = new WebSocket(wsuri);
部署后可能會遇到websocket不停斷開重連,此時不啟用根路徑的websocket即可
'/':{
target: config.real_target,
//ws: true,//注釋掉,不啟用即可
changeOrigin: true,
pathRewrite: {
}
},總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項目中常用解決跨域的方法總結(jié)(CORS和Proxy)
在vue項目中,一般我們會遇到跨域的問題,vue項目中解決跨域是非常簡單的,下面這篇文章主要給大家介紹了關(guān)于vue項目中常用解決跨域的方法,主要解釋CROS和Proxy兩種方式,需要的朋友可以參考下2022-12-12
vue3聲明響應(yīng)式狀態(tài)使用(含ref,reactive,toRef(),toRefs()等)
這篇文章主要介紹了vue3聲明響應(yīng)式狀態(tài)使用(含ref,reactive,toRef(),toRefs()等),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue draggable resizable 實現(xiàn)可拖拽縮放的組件功能
這篇文章主要介紹了vue draggable resizable 實現(xiàn)可拖拽縮放的組件功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)2
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)的相關(guān)資料,實現(xiàn)Observer構(gòu)造函數(shù),監(jiān)聽已有數(shù)據(jù)data中的所有屬性,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01

