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?