Reactjs 由于CORS，Spring和React websocket聊天或不工作

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

我正在尝试使用Spring为后端创建一个聊天室，并对前端进行响应，然后将后端部署到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}
        />

}

用于WebMVCConfiguer实现

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

@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");
}

对于WebSocketMessageBrokerConfigure实现

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

@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

---

非常感谢您的帮助

如错误消息所述，您不能将凭据模式与通配符源一起使用。您必须禁用凭据模式或在origin accept标头中设置特定的原点

如果决定启用凭据并设置具体的源，则可能还必须在源标题处指定正确的端口