vue的webpack代理websocket配置

场景: 在前端vue项目中需要使用websocket,同时项目中使用代理的方式进行后端请求。

目前网上几乎没有关于这一块的配置说明资料,本人也就随便记两笔吧,以便后人爬坑有所依靠。哈哈 有用记得点赞!

1 在项目的config/index.js文件中的dev参数下增加代理配置:

dev: {
   proxyTable: {
      '/socket': {
        target: 'ws://localhost:8000',//后端目标接口地址
        changeOrigin: true,//是否允许跨域
        pathRewrite: {
          '^/socket': '',//重写,
        },
        ws: true //开启ws, 如果是http代理此处可以不用设置
      }
    },

 。。。
}

2 在vue的初始化websocket连接处的uri写法:

此处的uri的写法 'ws://' + location.host + '/socket/websocket/' + id 。

//此处因已将websocket添加到vue中所以通过this.$connect()方法创建websocket连接
this.$connect('ws://' + location.host + '/socket/websocket/' + id + '/' + cn, { format: 'json' })

需要注意几点:
     a、此处uri前面必须加ws://前缀

     b、uri的前缀后面必须是location.host,表示ws访问当前前端项目的地址,而不能只写代理的key值‘/socket’ 或其他地址端口

     c、在location.host后面紧跟的是代理key值,与第1步中定义的key一致‘/socket’

     d、地址中其他部分为后端api的uri

3、后端websocket的server类


@ServerEndpoint("/websocket/{userId}/{cn}")
@Component
public class WebSocketServer {

    。。。此处代码省略,网上一大把
}

可能出现的异常:

Uncaught DOMException: Failed to construct 'WebSocket': The URL 'ws://localhost/socket/xxx' is invalid.

出现上述异常 或类似异常的,基本可以确定是URL配置错误。导致上面的错误其实就是uri中:ws://localhost/....与系统前端访问地址不一致导致代理失败(或代理未生效),此处必须加ws:// 以及 与前端访问地址端口一致,见第2步中正确写法

你可能感兴趣的:(vue,webpack,websocket,VUE,websocket)