Как остановить политику CORS от закрытия stomp.js WebSocket? - PullRequest
Новая
       11

Как остановить политику CORS от закрытия stomp.js WebSocket?

1 голос
/ 22 июня 2019

Я работаю над интерфейсом React.js для приложения обмена сообщениями. Я пытаюсь открыть сокеты для групп чата с текстовыми сообщениями, но похоже, что политика CORS препятствует этому: 

WebSocket connection to 'wss://dev-api.chatloop.org/stompEndpoint/733/e1l40zsf/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

и 

Failed to load resource: the server responded with a status of 403 ()

, а также: 

Access to XMLHttpRequest at 'https://dev-api.chatloop.org/stompEndpoint/733/frazjqye/xhr_streaming?t=1561171328160' from origin 'https://dev-react.chatloop.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

, а также: 

Access to resource at 'https://dev-api.chatloop.org/stompEndpoint/733/cjcd445t/eventsource' from origin 'https://dev-react.chatloop.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Очень похожие ошибки, когда я пытаюсь подключиться с http://localhost:3000.

Но, несмотря на все это, я все еще получаю консольный журнал от stomp.umd.js, в котором говорится, что сокет был открыт ... иногда.

На бэкэнде это выглядит как Конфигурация веб-сокета была настроена для правильного доступа к источникам:

WebSocketConfig.java 

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    public static final String CHAT_DESTINATION = "/chatMessages";
    public static final String INVITES_DESTINATION = "/invites";

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/stompEndpoint").setAllowedOrigins("*").withSockJS();
    }

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

}

Так что я склонен думать, что проблема на моем веб-интерфейсе:

chatService.js 

function connectStompClient(chatId) {
  const socket = new SockJS('https://dev-api.chatloop.org/stompEndpoint');
  const stompClient = Stomp.over(socket);
  stompClient.connect(
    {},
    function() {
      stompClient.subscribe('/chatMessages/newMessage' + chatId, function(message) {
        console.log('inside subscribe success callback');
        showMessage(message);
      });
    },
    function(error) {
      console.log(error.toString());
    }
  );
  function showMessage(message) {
    console.log('message from stompClient: ', message);
  }
}

... которая вызывается из этой функции при событии щелчка:

ChatsPage.js 

handleShowChat = (chatType, chatId) => {
    const { dispatch, userRole } = this.props;
    this.setState((prevState) => {
      return {
        showChat: !prevState.showChat,
        chatId: chatId
      };
    });
    dispatch(chatsActions.getMessages(chatType, chatId, userRole));
    chatService.connectStompClient(chatId);
  };

Кто-нибудь может увидеть, что мне нужно сделать, чтобы этот сокет открылся аккуратно?

...