Spring Boot结合STOMP、SockJS实现WebSocket时JavaScript端报CORS错误如何解决

1. 修复CORS配置冲突 #

你当前的CorsConfig中同时配置了allowCredentials(true)和allowedOrigins("*")，这违反了浏览器的同源策略规则：携带凭证的跨域请求不允许使用*作为允许源，会直接触发CORS拦截。
修改方案二选一：

• 不需要传递凭证的场景，直接删除allowCredentials(true)配置
• 需要传递凭证的场景，将allowedOrigins("*")替换为allowedOriginPatterns("*")（Spring Boot 2.4+支持），或者指定你的前端实际地址allowedOrigins("http://localhost:63342")

修改后的CorsConfig示例：

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry){
                registry.addMapping("/**")
                        .allowedOriginPatterns("*")
                        .allowedHeaders("*")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .maxAge(3600);
            }
        };
    }
}

2. 补全WebSocket端点的跨域配置 #

你当前只给带SockJS适配的WebSocket端点配置了跨域，没有给原生WebSocket端点加跨域规则，SockJS做降级适配时会触发跨域错误。
修改WebSocketConfig的registerStompEndpoints方法：

@Override public void registerStompEndpoints(StompEndpointRegistry registry) {
    // 给原生WebSocket端点也加上跨域配置
    registry.addEndpoint("/batch-socket").setAllowedOriginPatterns("*");
    registry.addEndpoint("/batch-socket")
            .setAllowedOriginPatterns("*")
            .withSockJS();
}

3. 修正消息代理前缀配置（可选，解决跨域修复后收不到消息的问题） #

你当前的消息代理前缀配置颠倒了：

• setApplicationDestinationPrefixes是客户端向服务端发消息的前缀
• enableSimpleBroker是服务端向客户端推送消息的前缀
  和你代码中@SendTo("/topic/messages")、前端订阅/topic/messages的逻辑不匹配，修改后：

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

4. 版本兼容说明 #

如果你使用的是Spring Boot 2.4以下版本，将所有setAllowedOriginPatterns替换为setAllowedOrigins，同时删除allowCredentials(true)配置即可。

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