JavaScript 中 Vite 怎么配置代理 WebSocket 长连接-js教程-PHP中文网

vite 配置 websocket 代理需设 ws: true 且 target 用 ws:// 或 wss://；前端用相对路径如 /api/ws；避免 hmr 端口冲突；外网访问时需配置 server.hmr.host、port 和 protocol。

javascript 中 vite 怎么配置代理 websocket 长连接

在 Vite 中配置 WebSocket 代理，关键不是“加个地址就行”，而是让开发服务器正确识别并升级 HTTP 请求为 WebSocket 连接。HTTP 代理默认不处理 Upgrade: websocket 请求头，所以必须显式启用 WebSocket 支持，否则会报 net::ERR_CONNECTION_REFUSED 或握手 400 错误。

必须设置 ws: true 并用 ws:// 或 wss:// 协议

这是最常被忽略的两点：

proxy 配置里必须写 ws: true，否则 Vite 不会拦截和转发 WebSocket 升级请求
target 地址必须以 ws:// 或 wss:// 开头，不能写 http:// —— 即使后端服务本身支持 ws 升级，Vite 代理也只认协议前缀
例如后端 WebSocket 服务运行在 ws://localhost:8080/ws，代理应配成：

server: {
  proxy: {
    '/api/ws': {
      target: 'ws://localhost:8080',
      ws: true,
      changeOrigin: true
    }
  }
}

前端连接地址要用相对路径，别硬写 localhost

避免直接 new WebSocket('ws://localhost:5173/api/ws')，因为：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

Vite 开发服务器自身也用 WebSocket 做 HMR（热更新），端口冲突时你连上的可能是 HMR 服务，导致 Invalid frame header 或 1006 错误
用相对路径可自动适配当前页面协议、域名和端口：new WebSocket('/api/ws')
确保前端路径与 proxy 中的 key 完全一致（包括大小写、开头结尾斜杠）

注意 HMR 端口别和后端 WebSocket 端口撞车

Vite 默认复用 server.port 做 HMR，如果后端也在用相同端口提供 WebSocket，会出现争抢：

不要手动设置 server.hmr.port 为固定值（如 8080），建议留空让 Vite 自动分配
若需调试 HMR 行为，可临时改用 server.hmr.overlay: false 关闭错误遮罩，方便看底层日志

外网访问时要修正 HMR 的 WebSocket 地址

用 ngrok、cpolar 等工具映射本地服务时，Vite 客户端仍会尝试连 ws://xxx.ngrok.io:5173（而该端口未暴露），引发无限重连：

在 vite.config.js 中配置 server.hmr.host 和 server.hmr.port，指向实际暴露的域名和端口
例如映射地址是 https://abc.ngrok.io，且 WebSocket 走 443，则设：hmr: { host: 'abc.ngrok.io', port: 443, protocol: 'wss' }