由于 CORS，Spring 和 React websocket 聊天无法正常工作

Posted 2023-03-04

【中文标题】由于 CORS，Spring 和 React websocket 聊天无法正常工作

【英文标题】：Spring and React websocket chat nor working because of CORS

【发布时间】：2021-03-05 06:44:31

【问题描述】：

可能这是一个愚蠢的问题，但我不知道如何处理它。

我正在尝试使用 Spring 作为后端和 React 作为前端创建聊天，然后将后端部署到 Heroku

问题是应用无法建立连接，因为 CORS 出现错误

Access to XMLHttpRequest at 'https://inversedevs.herokuapp.com/ws/info?t=1606041704061' from origin 'http://localhost:3000/' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. GET https://inversedevs.herokuapp.com/ws/info?t=1606041723180 net::ERR_FAILED

我的 SockJS 客户端是这样的

<SockJsClient
          url=SOCKET_URL
          topics=['/topic/user']
          onConnect=this.onConnected
          onDisconnect=console.log("Disconnected!")
          onMessage=msg => this.onMessageReceived(msg)
          debug=false
        />

我的 Java 代码是用于控制器的：

@Controller
public class SocketController 

@MessageMapping("/user-all")
@SendTo("/topic/user")
public MessageBean send(@Payload MessageBean message) 
    return message;

用于 WebMvcConfigurer 实现

    @Override
public void addCorsMappings(CorsRegistry registry) 
   registry.addMapping("/**").allowCredentials(true).allowedOrigins("*").allowedMethods("*");

对于 WebSocketMessageBrokerConfigurer 的实现

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer 
@Override
public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) 
    stompEndpointRegistry.addEndpoint("/websocket-chat")
            .setAllowedOrigins("*")
            .withSockJS();


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

日志显示握手返回状态为 200

不胜感激！

【参考方案1】：

正如错误消息所述，您不能使用带有通配符来源的凭证模式。您必须禁用凭证模式或在您的原始接受标头中设置特定来源。

如果您决定保留凭据并设置具体来源，您可能还必须在来源标头处指定正确的端口。