webpack dev-server代理websocket問題
更新時(shí)間：2024年08月30日 11:11:02 作者：AlsikeMou
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
webpack dev-server 代理 websocket
在寫東西的時(shí)候遇到websocket在開發(fā)中需要代理，并且基于http，部署后利用Nginx代理并使用https的情況，想?yún)f(xié)調(diào)兩種配置但不太會(huì)寫。嘗試之后記下來。
首先用到https之后肯定是不能在頁面中直接使用url去訪問各個(gè)后端的，因此務(wù)必配置proxy。
proxy
開發(fā)環(huán)境中使用proxy進(jìn)行多后端轉(zhuǎn)發(fā)配置，轉(zhuǎn)發(fā)表盡量與nginx配置相對(duì)應(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時(shí)與http請(qǐng)求不同，不能使用/c/前綴直接匹配，而是要使用帶有協(xié)議與地址端口等完整的路徑
代碼如下：
//根據(jù)http協(xié)議判斷是否為ws或wss let proto = document.location.protocol == 'http:'? 'ws:': 'wss:'; //取地址+端口，配置80端口時(shí)port是空的，所以判斷一下 let address = document.location.port? document.location.hostname + ':' + document.location.port: document.location.hostname ; //拼接請(qǐng)求地址 const wsuri = proto + "http://" + address + "/c/"+this.robotId; console.log(wsuri); this.websock = new WebSocket(wsuri);
部署后可能會(huì)遇到websocket不停斷開重連，此時(shí)不啟用根路徑的websocket即可
'/':{
target: config.real_target,
//ws: true,//注釋掉，不啟用即可
changeOrigin: true,
pathRewrite: {
}
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在vue3中使用import.meta.env方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue項(xiàng)目中常用解決跨域的方法總結(jié)(CORS和Proxy)
在vue項(xiàng)目中,一般我們會(huì)遇到跨域的問題,vue項(xiàng)目中解決跨域是非常簡(jiǎn)單的,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中常用解決跨域的方法,主要解釋CROS和Proxy兩種方式,需要的朋友可以參考下2022-12-12
vue3聲明響應(yīng)式狀態(tài)使用(含ref,reactive,toRef(),toRefs()等)
這篇文章主要介紹了vue3聲明響應(yīng)式狀態(tài)使用(含ref,reactive,toRef(),toRefs()等),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue全局變量局部變量，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能
這篇文章主要介紹了vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
Vue項(xiàng)目中添加鎖屏功能實(shí)現(xiàn)思路
這篇文章主要介紹了Vue項(xiàng)目中添加鎖屏功能的實(shí)現(xiàn)思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue3使用mitt進(jìn)行組件通信的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購物車小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)2
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，實(shí)現(xiàn)Observer構(gòu)造函數(shù)，監(jiān)聽已有數(shù)據(jù)data中的所有屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
如何使用 vue-cli 創(chuàng)建模板項(xiàng)目
這篇文章主要介紹了如何使用 vue-cli 創(chuàng)建模板項(xiàng)目，幫助大家更好的理解和學(xué)習(xí)vue框架的知識(shí)，感興趣的朋友可以了解下2020-11-11