websocket ---反向代理解决跨域问题

本文介绍了如何使用反向代理解决WebSocket在本地调试时的跨域问题。通过在webpack.dev.config.js中配置代理插件,并根据开发或测试环境初始化WebSocket连接。同时,文章提到了在实际接口联调中,由于本地开发服务与接口地址的域名不同导致的跨域问题,可以通过webpack的内置代理功能,将接口映射到本地以避免跨域。还给出了相关配置示例和参考资料。
摘要由CSDN通过智能技术生成

让websocket 可以在本地调试

首先在 测试环境的配置 webpack.dev.config.js 的 plugins 添加;

new webpack.DefinePlugin({
     'process.env': {
         NODE_ENV: '"development"'
     }
 }),

然后在初始化websocket的时候判断当前环境是开发环境还是测试环境

    initWebSocket() {//webSocket初始化
      let path = window.location.host;

      //这里是关键,可以判断当前环境是生产环境还是开发环境,开发环境加测试域名即可调试,生产环境由于代码要放到服务器获取本地域名即可
      if(process.env.NODE_ENV === 'development') {
        path =  'baidu.com'; //这里改成你测试的域名
      } else {
        path = window.location.host;
      }

      const wsuri = 'wss://' + path + "/api/scanJump/ws.jhtml"; //如果是wss协议,这里path一定要域名才能正常连接 ip+端口的方式不行(注:这里/api是设置了反向代理解决了跨域问题,详情看下面链接)
      this.websock = new WebSocket(wsuri);
      this.websock.onopen =
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值