SpringBoot集成WebSocket对接JS前端出现CORS跨域错误如何解决

云上老周

2026-10-6

SpringBoot WebSocket STOMP 跨域CORS错误解决方案

以下是需要逐一修正的问题点及修改代码：

1. 修正WebSocket端点跨域配置

SpringBoot 2.4及以上版本中，setAllowedOrigins("*") 与 withSockJS() 搭配使用时会失效，需替换为setAllowedOriginPatterns("*")：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry){
        registry.addEndpoint("/stomp-endpoint")
                // 替换原有setAllowedOrigins("*")
                .setAllowedOriginPatterns("*")
                .withSockJS();
    }

    // 其余配置待修正
}

注：控制器上的@CrossOrigin注解对WebSocket STOMP握手请求无效，无需额外配置。

2. 统一消息代理前缀配置

你当前配置的消息代理前缀为/topics，但@SendTo注解使用的路径前缀是/topic，两边不匹配会导致消息无法正常推送，需修改为一致前缀：

@Override
public void configureMessageBroker(MessageBrokerRegistry registry){
    // 改为和@SendTo匹配的/topic前缀
    registry.enableSimpleBroker("/topic");
    registry.setApplicationDestinationPrefixes("/app");
}

3. 修正前端代码错误

你的前端代码存在两处错误：连接地址多了多余斜杠、订阅地址不需要加完整域名前缀，修改后代码如下：

function connect() {
    // 去掉多余的斜杠，修正连接地址
    var socket = new SockJS('http://localhost:8080/stomp-endpoint');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        // 订阅地址直接写主题路径，不需要加域名前缀
        stompClient.subscribe('/topic/greetings', function (greeting) {
            showGreeting(JSON.parse(greeting.body));
        });
    });
}