从Create React App迁移到Vite后WebSocket连接失败：2000 All transports failed

1. 修正Vite代理配置 #

Vite的代理逻辑与Create React App存在差异，迁移时若配置不当，会导致SockJS请求被错误转发到本地开发服务器。在vite.config.js中确保WebSocket路径被正确代理：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://my-service',
        changeOrigin: true,
        // 关键配置：开启WebSocket代理支持
        ws: true,
      },
    },
  },
});

2. 强制SockJS使用WebSocket传输 #

SockJS默认会尝试多种传输方式，Vite环境下部分传输方式可能出现兼容性问题。显式指定仅使用WebSocket传输：

useEffect(() => {
  // 添加transports参数限定传输方式
  const socket = new SockJS('https://my-service/api', null, {
    transports: ['websocket']
  });

  const stompClient = Stomp.over(socket);

  stompClient.connect(
    {
      'X-Authorization': 'Bearer ' + token
    },
    function () {
      stompClient.subscribe('/user/queue/result', function (message: any) {
        const weMessageBody = JSON.parse(message?.body);
        // 处理消息逻辑
      });

      stompClient.send('/app/init');
    },
    function () {
      toast.error('WS connection lost');
      socket.close();
      stompClient.disconnect();
    }
  );

}, [token]); // 依赖项添加token，确保token更新时重新建立连接

3. 验证环境变量配置 #

Vite要求环境变量必须以VITE_开头，若迁移时未调整变量格式，可能导致后端地址被错误替换为本地地址：

# .env文件
VITE_WS_ENDPOINT=https://my-service/api

代码中使用环境变量：

const socket = new SockJS(import.meta.env.VITE_WS_ENDPOINT, null, {
  transports: ['websocket']
});

4. 规避Vite HMR与业务WebSocket冲突 #

Vite热模块替换（HMR）的WebSocket可能与业务WebSocket端口冲突，可修改HMR端口测试：

// vite.config.js
export default defineConfig({
  server: {
    hmr: {
      port: 5138, // 改用非业务WebSocket端口
    },
  },
});

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