【报错】vite+vue3项目中WebSocket代理连接失败的一种可能性

注意vite.config.ts中代理设置是否设置header

vite.config.ts

"/api/": {
    target: `http://1.1.1.1/`, //请求后台接口
    ws: true,
    changeOrigin: false, // 允许跨域
    headers: {
      Connection: "keep-alive",
    },
},

header设置会干扰WebSocket协议的正常升级流程，从而影响到WebSocket的通信

注释即可，或者分开做代理，Vite 在开发环境下默认可能会修改Connection头部的值为close。这意味着每个HTTP请求完成后，连接会被关闭，而不是保持打开状态以供后续请求复用。

"/api/": {
   target: `http://1.1.1.1/`, //请求后台接口
   ws: true,
   changeOrigin: false, // 允许跨域
},