CORS blocking access

[hagarnabil]

Hi everyone,

I'm facing an issue with CORS blocking access in my application, below is what I've done in my frontend and backend applications.

In the frontend app I'm using angular to make this login request 

const headers = new HttpHeaders({
      'Authorization': 'Basic ' + btoa(${this.clientID}:${this.clientSecret}),
      'Content-Type': 'application/x-www-form-urlencoded',
      'Access-Control-Allow-Origin': '*'
    });                                                                                                                return this.http
      .post<AuthResponseBackend>(
        'https://cors-anywhere.herokuapp.com/https://amwftwpkt.trial-accounts.ondemand.com/oauth2/token',
        data.toString(), { headers }
      )

it works only if I add this CORS link  https://cors-anywhere.herokuapp.com/  before login link and open that link in my browser https://cors-anywhere.herokuapp.com/corsdemo  to request temporary access to the demo server. I need it to work without these CORS links.

In the backend application, I'm working with spring boot and using security configuration. I've added allow CORS configuration in my security configuration as shown in my code snippets below and also above each controller I've added the CrossOrigin annotation. When I deploy my application on kyma and the frontend side tries to connect to it, It still gives an error due to CORS. Any help is appreciated. 

Here are the github links for the full codes of the applications; Frontend application , Backend application 

Thanks in advance.

 @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowedOrigins(List.of("http://localhost:4200"));
        corsConfiguration.setAllowedMethods(List.of("GET", "POST", "DELETE", "PUT"));
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setAllowedHeaders(List.of("*"));
        corsConfiguration.setMaxAge(3600L);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return source;
    }

 @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        // @formatter:off
        http.sessionManagement(sess -> sess.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                .authorizeHttpRequests(authz ->
                        authz.requestMatchers("/measurements/*").hasRole("USER")
                                .requestMatchers("/formulas/*").hasRole("USER")
                                .requestMatchers("/linetypes/*").hasRole("USER")
                                .requestMatchers("/materialgroups/*").hasRole("USER")
                                .requestMatchers("/modelspecs/*").hasRole("USER")
                                .requestMatchers("/modelspecdetails/*").hasRole("USER")
                                .requestMatchers("/personnelnumbers/*").hasRole("USER")
                                .requestMatchers("/servicenumbers/*").hasRole("USER")
                                .requestMatchers("/servicetypes/*").hasRole("USER")
                                .requestMatchers("/*").authenticated()
                                .anyRequest().denyAll())
                .oauth2ResourceServer(oauth2 -> oauth2.jwt(jwt -> jwt.jwtAuthenticationConverter(new MyCustomHybridTokenAuthenticationConverter())));

        http.cors(httpSecurityCorsConfigurer -> httpSecurityCorsConfigurer.configurationSource(corsConfigurationSource()));
        http.csrf(csrf -> csrf.disable());
        return http.build();
    }

@CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)