webpack dev-server代理websocket题目

2024-11-2 22:46| 发布者: 2ae29| 查看: 76| 评论: 0

摘要: 目次webpack dev-server 代理 websocketproxywebsocket总结webpack dev-server 代理 websocket 在写东西的时间遇到websocket在开辟中需要代理，并且基于http，部署后使用Nginx代理并使用https的环境，想和谐两种设置

webpack dev-server 代理 websocket

在写东西的时间遇到websocket在开辟中需要代理，并且基于http，部署后使用Nginx代理并使用https的环境，想和谐两种设置但不太会写。尝试之跋文下来。

首先用到https之后肯定是不能在页面中直接使用url去访问各个后端的，因此务必设置proxy。

proxy

开辟环境中使用proxy举行多后端转发设置，转发表只管与nginx设置相对应，方便部署。

下为用到的设置匿名版。

[code]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: { } },[/code]

websocket

创建websocket时与http哀求差别，不能使用/c/前缀直接匹配，而是要使用带有协议与地点端口等完备的路径

代码如下：

[code]//根据http协议判断是否为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 + "//" + address + "/c/"+this.robotId; console.log(wsuri); this.websock = new WebSocket(wsuri);[/code]

部署后可能会遇到websocket不停断开重连，此时不启用根路径的websocket即可

[code]'/':{ target: config.real_target, //ws: true,//注释掉，不启用即可 changeOrigin: true, pathRewrite: { } },[/code]

总结

以上为个人履历，希望能给各人一个参考，也希望各人多多支持脚本之家。

来源：https://www.jb51.net/javascript/326729eda.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：Vue3监听reactive对象中属性变化的方法下一篇：JavaScript判断两个对象是否相等的方法总结

账号		自动登录	找回密码
密码			立即注册

webpack dev-server代理websocket题目

目次