Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource issue - spring-boot

Question

I got stuck in implementing websocket in my application. I am using Spring Boot + angular 8
This is my websocket configuration
Security configuration
#Override
protected void configure(HttpSecurity http) throws Exception {
System.out.println("****");
http.cors().and().csrf().disable()
.authorizeRequests()
.antMatchers("/oauth/token/**").permitAll()
.antMatchers("/websocket/**").permitAll()
.antMatchers("/ws/**").authenticated()
.anyRequest().permitAll().and()
.addFilter(new JwtAuthenticationFilter(authenticationManager(),getApplicationContext()))
.addFilter(new JwtAuthorizationFilter(authenticationManager(),getApplicationContext()))
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
http.headers().frameOptions().sameOrigin();
}
#Bean
CorsConfigurationSource corsConfigurationSource() {
final CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowedOrigins(Arrays.asList("*","http://localhost:4200"));
configuration.setAllowCredentials(false);
configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "OPTION", "DELETE"));
configuration.setAllowedHeaders(Arrays.asList("Content-Type", "Access-Control-Allow-Headers","Origin", "x-requested-with", "Authorization"));
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
Websocket Configuration
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
#Configuration
#EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
#Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
#Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket").setAllowedOrigins("*").withSockJS();
}
}
Below is my controller
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
#Controller
public class ClientForwardController {
//Below controller is used to forward all my un mapped request to index.html
// Because of this websocket /info request forwarding to index.html
#GetMapping(value = "/**/{path:[^\\.]*}")
public String forward() {
return "forward:/";
}
#MessageMapping("/test")
#SendTo("/topic/testing")
public String test() throws Exception {
Thread.sleep(3000); // simulated delay 3s
return "success";
}
}
Below is my Angular code to connect to websocket.
import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';
export class WebSocketAPI {
webSocketEndPoint: string = 'http://localhost:8080/websocket';
topic: string = "/topic/testing";
stompClient: any;
displayProductComponent: TodaysMarketListComponent;
constructor(displayProductComponent: TodaysMarketListComponent){
this.displayProductComponent = displayProductComponent;
}
_connect() {
console.log("Initialize WebSocket Connection");
let ws = new SockJS(this.webSocketEndPoint);
this.stompClient = Stomp.over(ws);
const _this = this;
_this.stompClient.connect({}, function (frame: any) {
_this.stompClient.subscribe(_this.topic, function (sdkEvent) {
_this.onMessageReceived(sdkEvent);
});
}, this.errorCallBack);
};
}
But i am not able to connect to server.
Kindly suggest to fix this issue.
Error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘http://localhost:8080/websocket/info?t=1585208056284’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).
Whoops! Lost connection to http://localhost:8080/websocket
Thanks,
Venkataramana