WebSocket connection to ‘...‘ failed: Invalid frame header

问题描述

使用Vue创建客户端项目，项目中需要用到websocket协议与服务端通信，并为客户端请求配置代理，通过npm run serve启动时，控制台一直打印错误（大概1s一次），同样对应的服务端也会报错

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 15436,
    allowedHosts: 'all',
    proxy: {
      '^/ws': {
        target: 'ws://127.0.0.1:15437',
        ws: true,
        changeOrigin: true,
        // logLevel: 'debug' // 可选，用于调试代理连接
      },
    },
    // webSocketServer: false,
  }
})

---

原因分析：

提示：这里填写问题的分析：

使用 nodejs 启动前段服务的时候，不仅仅会启动一个http协议的 服务（浏览器可以直接访问的那个），还会默认启动一个 websocket服务（个人猜测用于 nodejs服务的热更新，参考 https://webpack.js.org/configuration/dev-server/#devserverwebsocketserver
），这个默认的服务和你自己搭建的服务在通信格式上不同，它会每隔大概1s 发送一个 websocket帧，而由于这个帧的格式与服务端定义的格式不同，服务端不认识，于是定义为 Invalid frame header

---

解决方案：

提示：这里填写该问题的具体解决方案：

最易搜索到的解决方案：

1. https://github.com/vuejs/vue-cli/issues/1850
2. https://stackoverflow.com/questions/48487056/websocket-connection-to-failed-invalid-frame-header
3. https://segmentfault.com/q/1010000023239199

上述方案的目的都是把 websocket代理关掉，但是如果关掉代理，客户端则不能正常连接服务端，核心的点在于关掉nodejs 启动默认的websocket服务

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 15436,
    allowedHosts: 'all',
    proxy: {
      '^/ws': {
        target: 'ws://127.0.0.1:15437',
        ws: true,
        changeOrigin: true,
        // logLevel: 'debug' // 可选，用于调试代理连接
      },
    },
    webSocketServer: false,  // !!!!! 关键
  }
})