React Vite集成SockJS Client报错：All transports failed求助

项目背景 #

• 基于React + Vite搭建，未配置代理
• 使用webstomp-client和sockjs-client连接JHipster生成的SpringBoot Websocket服务端，测试公共SockJS服务也出现相同问题

服务端配置（JHipster生成） #

package com.mycompany.myapp.config;

import com.mycompany.myapp.security.AuthoritiesConstants;
import java.security.Principal;
import java.util.*;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.server.*;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.security.authentication.AnonymousAuthenticationToken;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.*;
import org.springframework.web.socket.server.HandshakeInterceptor;
import org.springframework.web.socket.server.support.DefaultHandshakeHandler;
import tech.jhipster.config.JHipsterProperties;

@Configuration
@EnableWebSocketMessageBroker
public class WebsocketConfiguration implements WebSocketMessageBrokerConfigurer {

    public static final String IP_ADDRESS = "IP_ADDRESS";

    private final JHipsterProperties jHipsterProperties;

    public WebsocketConfiguration(JHipsterProperties jHipsterProperties) {
        this.jHipsterProperties = jHipsterProperties;
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        String[] allowedOrigins = Optional
            .ofNullable(jHipsterProperties.getCors().getAllowedOrigins())
            .map(origins -> origins.toArray(new String[0]))
            .orElse(new String[0]);
        registry
            .addEndpoint("/websocket/tracker")
            .setHandshakeHandler(defaultHandshakeHandler())
            .setAllowedOrigins(allowedOrigins)
            .withSockJS()
            .setInterceptors(httpSessionHandshakeInterceptor());
    }

    @Bean
    public HandshakeInterceptor httpSessionHandshakeInterceptor() {
        return new HandshakeInterceptor() {
            @Override
            public boolean beforeHandshake(
                ServerHttpRequest request,
                ServerHttpResponse response,
                WebSocketHandler wsHandler,
                Map<String, Object> attributes
            ) throws Exception {
                if (request instanceof ServletServerHttpRequest) {
                    ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
                    attributes.put(IP_ADDRESS, servletRequest.getRemoteAddress());
                }
                return true;
            }

            @Override
            public void afterHandshake(
                ServerHttpRequest request,
                ServerHttpResponse response,
                WebSocketHandler wsHandler,
                Exception exception
            ) {}
        };
    }

    private DefaultHandshakeHandler defaultHandshakeHandler() {
        return new DefaultHandshakeHandler() {
            @Override
            protected Principal determineUser(ServerHttpRequest request, WebSocketHandler wsHandler, Map<String, Object> attributes) {
                Principal principal = request.getPrincipal();
                if (principal == null) {
                    Collection<SimpleGrantedAuthority> authorities = new ArrayList<>();
                    authorities.add(new SimpleGrantedAuthority(AuthoritiesConstants.ANONYMOUS));
                    principal = new AnonymousAuthenticationToken("WebsocketConfiguration", "anonymous", authorities);
                }
                return principal;
            }
        };
    }
}

客户端连接代码 #

const url = `${WS_URL}/websocket/tracker?access_token=${authToken}`
const socket = new SockJS(url)
const stompClient = Stomp.over(
  socket, { protocols: ['v12.stomp'] }
)
stompClient.connect({}, (f) => {
  console.log('Connection established', f)
}, (e) => {
  console.error('Connect failed', e)
})

问题现象 #

• 连接自身SpringBoot服务或公共测试服务均报错：错误码2000: All transports failed
• 更换Firefox、Chrome、Safari浏览器后问题依旧
• 调试sockjs-client源码发现所有availableTransports均无法启用（驱动未定义）

环境信息 #

• Node: 20.6.1
• sockjs-client: 1.6.1
• webstomp-client: 1.2.6
• React模板: Metronic v8.0.25

解决建议 #

• 调整SockJS导入方式
  Vite使用ES模块，避免直接引用UMD版本，改用：

  import SockJS from 'sockjs-client/dist/sockjs.min.js'
  

  或在vite.config.js添加优化配置：

  export default defineConfig({
    optimizeDeps: {
      include: ['sockjs-client']
    }
  })
  

• 降级sockjs-client版本
  1.6.x版本可能与Vite的ES模块处理存在兼容性问题，尝试降级到1.5.2：

  npm install sockjs-client@1.5.2
  

• 手动指定传输方式
  创建SockJS实例时显式声明可用传输，跳过自动检测：

  const socket = new SockJS(url, null, {
    transports: ['websocket', 'xhr-streaming', 'xhr-polling']
  })
  

• 检查Vite开发服务器CORS配置
  确保允许WebSocket连接，在vite.config.js中添加：

  export default defineConfig({
    server: {
      cors: {
        origin: '*',
        allowHeaders: ['*'],
        methods: ['GET', 'POST', 'OPTIONS']
      }
    }
  })
  

• 简化Webstomp-client初始化
  去掉冗余配置，简化连接代码：

  const stompClient = Stomp.over(socket)
  stompClient.debug = () => {} // 禁用调试日志避免干扰
  stompClient.connect({}, () => {
    console.log('连接成功')
  }, (err) => {
    console.error('连接失败:', err)
  })
  

内容的提问来源于stack exchange，提问作者Vu Hong Ha