webpack dev-server代理websocket問題
webpack dev-server 代理 websocket
在寫東西的時(shí)候遇到websocket在開發(fā)中需要代理，并且基于http，部署后利用Nginx代理并使用https的情況，想?yún)f(xié)調(diào)兩種配置但不太會(huì)寫。嘗試之后記下來。
首先用到https之后肯定是不能在頁(yè)面中直接使用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)文章
Vue通過provide inject實(shí)現(xiàn)組件通信
這篇文章主要介紹了Vue通過provide inject實(shí)現(xiàn)組件通信,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
讓我們來回顧下Vue的介紹,可以發(fā)現(xiàn)Vue 最顯著的一個(gè)功能是響應(yīng)系統(tǒng)。那么它的實(shí)現(xiàn)原理有又是如何呢?下面小編和大家來一起學(xué)習(xí)一下2019-05-05
vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng)的示例代碼
這篇文章主要給大家介紹了如何通過vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng),文章通過代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以參考閱讀本文2023-08-08
vue實(shí)現(xiàn)某元素吸頂或固定位置顯示（監(jiān)聽滾動(dòng)事件）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)某元素吸頂或固定位置顯示，監(jiān)聽滾動(dòng)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要為大家詳細(xì)介紹了如何使用?vue3?指令封裝一個(gè)后臺(tái)管理系統(tǒng)圖片預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
在前端開發(fā)中,大數(shù)據(jù)量列表渲染 一直是性能挑戰(zhàn),假設(shè)我們有一個(gè) API 返回 1 萬(wàn)條數(shù)據(jù),如果直接渲染到頁(yè)面,必然會(huì)導(dǎo)致嚴(yán)重卡頓甚至瀏覽器崩潰,解決方案就是虛擬列表,所以本文給大家介紹了本文兩種實(shí)現(xiàn),并給出適用場(chǎng)景,需要的朋友可以參考下2025-08-08
使用WebSocket+SpringBoot+Vue搭建簡(jiǎn)易網(wǎng)頁(yè)聊天室的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用WebSocket+SpringBoot+Vue搭建簡(jiǎn)易網(wǎng)頁(yè)聊天室的實(shí)現(xiàn),具體的步驟如下,需要的朋友可以參考下2023-03-03
Vue項(xiàng)目中引入ESLint校驗(yàn)代碼避免代碼錯(cuò)誤
這篇文章主要為大家介紹了Vue項(xiàng)目中引入ESLint插件校驗(yàn)代碼避免代碼錯(cuò)誤的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享
這篇文章主要介紹了vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue實(shí)現(xiàn)搜索結(jié)果高亮顯示關(guān)鍵字
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)搜索結(jié)果高亮顯示關(guān)鍵字，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05