how to resolve 'has been blocked by CORS policy' with spring boot + msal and angular?

Question

Spring boot with Microsoft authentication library (azure AD) authentication. Angular client accessing API endpoint gets an error 'has been blocked by CORS policy. Response to preflight reqest doesnt pass access ..' Here the application has a SecurityConfig and the MSAL library also has a SecurityConfig.

Attempted these approaches

1. Added @Order(3) to the application SecurityConfig
2. Added antMatchers(HttpMethod.OPTIONS).permitAll() in the application securityconfig
3. @CrossOrigin(origins="http://localhost:4200")

Answer 1

For future reference, this is covered in the Spring Security Reference manual.

The things that you have listed in your question do not sound like complete solutions to me. Instead, first remember that CORS is a contract between your JavaScript application and your server -- any origin, headers, or methods that your JavaScript app wants to send need to be allowed on the server side.

And second, make two changes to your application. Update your security configuration to include the cors directive:

http
    .authorizeRequests((requests) -> requests.anyRequest().authenticated())
    // ...
    .cors(Customizer.withDefaults())
    // ...

And then publish a CorsConfigurationSource @Bean like this one:

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();        
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
    configuration.setAllowedMethods(Arrays.asList("GET","POST"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}