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中使用import.meta.env

    在vue3中使用import.meta.env

    这篇文章主要介绍了在vue3中使用import.meta.env方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    vue项目中常用解决跨域的方法总结(CORS和Proxy)

    在vue项目中,一般我们会遇到跨域的问题,vue项目中解决跨域是非常简单的,下面这篇文章主要给大家介绍了关于vue项目中常用解决跨域的方法,主要解释CROS和Proxy两种方式,需要的朋友可以参考下
    2022-12-12
  • vue3声明响应式状态使用(含ref,reactive,toRef(),toRefs()等)

    vue3声明响应式状态使用(含ref,reactive,toRef(),toRefs()等)

    这篇文章主要介绍了vue3声明响应式状态使用(含ref,reactive,toRef(),toRefs()等),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 详解Vue 全局变量,局部变量

    详解Vue 全局变量,局部变量

    这篇文章主要介绍了Vue全局变量局部变量,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue draggable resizable 实现可拖拽缩放的组件功能

    vue draggable resizable 实现可拖拽缩放的组件功能

    这篇文章主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • Vue项目中添加锁屏功能实现思路

    Vue项目中添加锁屏功能实现思路

    这篇文章主要介绍了Vue项目中添加锁屏功能的实现思路,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • Vue3使用mitt进行组件通信的步骤

    Vue3使用mitt进行组件通信的步骤

    这篇文章主要介绍了Vue3使用mitt进行组件通信的步骤,帮助大家更好的理解和学习使用vue,感兴趣的朋友可以了解下
    2021-05-05
  • vue实现购物车小案例

    vue实现购物车小案例

    这篇文章主要为大家详细介绍了vue实现购物车小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vue数据驱动模拟实现2

    Vue数据驱动模拟实现2

    这篇文章主要介绍了Vue数据驱动模拟实现的相关资料,实现Observer构造函数,监听已有数据data中的所有属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 如何使用 vue-cli 创建模板项目

    如何使用 vue-cli 创建模板项目

    这篇文章主要介绍了如何使用 vue-cli 创建模板项目,帮助大家更好的理解和学习vue框架的知识,感兴趣的朋友可以了解下
    2020-11-11

最新评论