webpack dev-server代理websocket问题

 更新时间:2024年08月30日 11:11:02   作者:AlsikeMou  
这篇文章主要介绍了webpack dev-server代理websocket问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

webpack dev-server 代理 websocket

在写东西的时候遇到websocket在开发中需要代理,并且基于http,部署后利用Nginx代理并使用https的情况,想协调两种配置但不太会写。尝试之后记下来。

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

proxy

开发环境中使用proxy进行多后端转发配置,转发表尽量与nginx配置相对应,方便部署。

下为用到的配置匿名版。

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

创建websocket时与http请求不同,不能使用/c/前缀直接匹配,而是要使用带有协议与地址端口等完整的路径

代码如下:

//根据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);

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

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3 Teleport瞬间移动函数使用方法详解

    vue3 Teleport瞬间移动函数使用方法详解

    这篇文章主要为大家详细介绍了vue3 Teleport瞬间移动函数使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • vue项目登录模块滑块拼图验证功能实现代码(纯前端)

    vue项目登录模块滑块拼图验证功能实现代码(纯前端)

    滑块验证作为一种反机器人的工具,也会不断发展和演进,以适应不断变化的威胁,这篇文章主要给大家介绍了vue项目登录模块滑块拼图验证功能实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue跳转后不记录历史记录的问题

    vue跳转后不记录历史记录的问题

    这篇文章主要介绍了vue跳转后不记录历史记录的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue-resource + json-server模拟数据的方法

    vue-resource + json-server模拟数据的方法

    本篇文章主要介绍了vue-resource + json-server模拟数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • el-menu实现横向溢出截取的示例代码

    el-menu实现横向溢出截取的示例代码

    在进行vue开发的时候,我们不可避免会使用到导航菜单,element方便的为我们提供了导航菜单组件,下面这篇文章主要给大家介绍了关于el-menu实现横向溢出截取的相关资料,需要的朋友可以参考下
    2022-06-06
  • Vue使用json-server进行后端数据模拟功能

    Vue使用json-server进行后端数据模拟功能

    这篇文章主要介绍了Vue使用json-server进行后端数据模拟功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • Vue单页应用引用单独的样式文件的两种方式

    Vue单页应用引用单独的样式文件的两种方式

    这篇文章给大家介绍Vue单页应用如何引用单独的样式文件,本文以css文件为例,通过两种方式给大家介绍的非常详细,需要的朋友参考下吧
    2018-03-03
  • vue 实现用户登录方式的切换功能

    vue 实现用户登录方式的切换功能

    这篇文章主要介绍了vue 实现用户登录方式的切换功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue3+ts使用APlayer的示例代码

    vue3+ts使用APlayer的示例代码

    这篇文章主要介绍了vue3+ts使用APlayer的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • uni app仿微信顶部导航条功能

    uni app仿微信顶部导航条功能

    这篇文章主要介绍了uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09

最新评论