React应用无法连接Spring Boot WebSocket问题求助

环境与问题概述 #

• 使用Spring Boot 3.4.0（Java 21）搭建基础WebSocket服务
• 后端控制台已输出Registering WebSocket endpoint: /ws日志，说明端点注册成功
• 前端使用React + @stomp/stompjs + SockJS尝试连接，无法建立WebSocket连接，浏览器控制台报错

后端代码配置 #

WebSocketConfig.java #

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        System.out.println("Registering WebSocket endpoint: /ws");
        registry.addEndpoint("/ws").withSockJS();
    }
}

SampleController.java #

@RestController
@RequestMapping("/sample")
@CrossOrigin
public class SampleController {
    
    @Autowired
    private SimpMessagingTemplate messagingTemplate;
    
    @GetMapping(path = "/test")
    public String testGet() {
        return "get working";
    }
    
    
    @GetMapping(path = "/websocket/sample")
    public void testWebsocket() {
        messagingTemplate.convertAndSend("/topic/data-update", "Data updated!");
    }
    
}

前端React代码 #

import React, { useEffect } from "react";
import { Client } from "@stomp/stompjs";
import SockJS from "sockjs-client";

const WebSocketTest = () => {
  useEffect(() => {
    // WebSocket connection
    const socket = new SockJS("http://localhost:8080/ws");
    const stompClient = new Client({
      webSocketFactory: () => socket,
      debug: (str) => console.log(str),
      onConnect: () => {
        console.log("Connected to WebSocket");

        stompClient.subscribe("/topic/data-update", () => {
           console.log("Triggered");
        });
      },
      onStompError: () => {
        console.log("error");
      },
    });

    stompClient.activate();

    return () => {
      stompClient.deactivate();
    };
  }, []);

  return <h1>Listening for WebSocket updates...</h1>;
};

export default WebSocketTest;

排查建议 #

• 修复WebSocket端点跨域配置：@CrossOrigin仅作用于REST接口，WebSocket端点需要单独配置跨域。修改WebSocketConfig中的registerStompEndpoints方法，添加跨域允许规则：

  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {
      System.out.println("Registering WebSocket endpoint: /ws");
      registry.addEndpoint("/ws")
              .setAllowedOriginPatterns("*") // 允许所有来源，生产环境建议指定具体域名
              .withSockJS();
  }
  

  注：Spring Boot 2.4+版本推荐使用setAllowedOriginPatterns替代setAllowedOrigins，避免跨域匹配问题。

• 验证前端依赖版本兼容性：确保@stomp/stompjs和sockjs-client版本与Spring Boot服务端兼容。建议使用最新稳定版：

  • sockjs-client: 1.6.1
  • @stomp/stompjs: 7.0.0+

• 检查连接地址与端口一致性：确认前端连接地址http://localhost:8080/ws与后端启动端口完全一致，若后端自定义了端口（如application.properties中设置server.port=8081），需同步修改前端地址。

• 查看详细错误日志：前端开启debug模式后，控制台会输出STOMP连接的详细过程，可根据日志定位具体错误（如握手失败、404错误、跨域拦截等）。

• 确认WebSocket依赖引入：检查pom.xml（Maven）或build.gradle（Gradle）是否已引入WebSocket starter依赖：
  Maven：

  <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-websocket</artifactId>
  </dependency>
  

  Gradle：

  implementation 'org.springframework.boot:spring-boot-starter-websocket'
  

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