Vue 2 devServer代理配置无法代理WebSocket如何解决？

错误原因分析 #

你遇到的构造报错和代理配置无关，是WebSocket构造函数不支持直接传入相对路径，必须传入符合ws/wss协议的完整绝对URL，这是Failed to construct 'WebSocket': The URL '/ws' is invalid报错的直接原因。
和axios等HTTP请求库会自动补全相对路径的逻辑不同，WebSocket原生构造函数没有自动拼接当前页面origin的处理，必须手动补全完整地址。

正确配置步骤 #

1. 修正前端WebSocket创建代码 #

根据当前页面的访问地址动态构造完整的WebSocket URL，即可让请求走Vue开发服务器的代理规则：

// 自动适配http/https环境对应的ws/wss协议
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
// window.location.host就是Vue开发服务器的地址+端口，请求会自动走代理规则
const soc = new WebSocket(`${wsProtocol}//${window.location.host}/ws`)

2. 确认代理配置 #

你原有vue.config.js中的WebSocket代理配置基本正确，可补充日志参数方便排查问题：

const host = "127.0.0.1"
const port = 8080

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target:`http://${host}:${port}/`,
        secure:false
      },
      "/ws": {
        target:`ws://${host}:${port}/`,
        ws:true,
        secure:false,
        changeOrigin:true,
        // 可选：开启代理日志，调试时可确认请求是否被正确转发
        logLevel: 'debug'
      }
    }
  }
}

3. 生效验证 #

修改完vue.config.js后必须重启Vue开发服务，配置才会生效，此时启动项目即可正常通过代理连接后端WebSocket服务。

内容的提问来源于stack exchange，提问作者koko