How to stop CORS policy from closing stomp.js WebSocket?

Viewed 1582

I'm working on a React.js frontend for a messaging app. I'm trying to open sockets for the text message chat groups, but it appears that the CORS policy is stopping that from happening:

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

and:

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

and also:

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.

and also:

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.

Very similar errors when I try to connect from http://localhost:3000 as well.

But despite all this, I still get a console log from stomp.umd.js saying that the socket has been opened... sometimes.

On the backend, it looks like the web socket config has been set up to allow cross-origin access properly:

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

}

So I'm inclined to think the problem is on my frontend:

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

... which is called from this function on a click event:

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

Can anyone see what I need to do to get this socket to open cleanly?

0 Answers
Related