'WebSockets fails to connect because of lost connection

I'm using spring boot in my backend and vuejs in my front-end . I've defined everything in the guide yet I still don't get my project to work.

FrontEnd

  connectToWS() {
  this.socket = new Sock("http://localhost:8754/stomp-endpoint");
  this.stompClient = Stomp.over(this.socket);
  this.stompClient.connect(
    {},
    frame => {
      this.connected = true;
      console.log(frame);
      this.stompClient.subscribe("/topic/greetings", tick => {
        console.log(tick);
        this.received_messages.push(JSON.parse(tick.body).content);
      });
    },
    error => {
      console.log(error);
      this.connected = false;
    }
  );
},

Backend

WebSocketConfiguration Class :

@Configuration
@EnableWebSocketMessageBroker
public class WebsocketConfiguration implements 
WebSocketMessageBrokerConfigurer
{

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) 
    {
        // with sockjs
        registry.addEndpoint("/stomp-endpoint")
                .setAllowedOrigins("http://localhost:8081")
                .withSockJS();

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

WebSecurityConfigClass :

   @Override
   protected void configure(HttpSecurity http) throws Exception {
   http.cors().and().csrf().disable()
  .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
  .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
  .authorizeRequests()

    .antMatchers("/api/v*/registration/**").permitAll()

    .antMatchers("/topic**").permitAll()

    .antMatchers("/stomp-endpoint").permitAll()

WebSocket error in browser URL changed to /stomp-endpoint/info....

UPDATE : The error is actually coming out from the browser . It actually changes the route of the api because it has sockjs integrated into it. I couldn't figure out why the API always gets a /info?t=RandomNumber after it. I need the route to remain the same as I typed it in the front-end. How can I stop the browser from updating my path. Thanks for helping !



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source