Trouble connecting angular frontEnd with javaBackend?

Question

I am trying to call the API in Backend but I have some error that I have not an idea from what is causing by. The problem started after I config the spring security in the backend. The call should activate Preflighted requests OPTION In my backend file, I have

@Configuration
@EnableWebSecurity
public class SpringSecurityConfigurationBasicAuth extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {    
            http.csrf().disable();
            http.authorizeRequests()
                .antMatchers(HttpMethod.OPTIONS,"/**").permitAll()
                    .anyRequest().authenticated()
                    .and()
//            .formLogin().and()
                .httpBasic();
    }
}

and in the frontend, I have this part of the code.

  executeHelloWorldServiceWithPathVariable(name) {
    const basicAuthHeaderString = this.createBasicAuthenticationHttpHeader();

    const headers = new HttpHeaders({
        Authorization: basicAuthHeaderString
      });
    return this.http.get<HelloWorldBean>(`http://localhost:8080/hello-world/path-variable/${name}`,
      {headers});
  }

  createBasicAuthenticationHttpHeader() {
    const username = 'start';
    const password = 'end';
    const basicAuthHeaderString = 'Basic ' + window.btoa(username + ':' + password);
    return basicAuthHeaderString;
  }

In the backend, I have already include

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

but still, I am not able to call this API in the console, I should get something like an OPTION method but in fact, I get those:

General

Request URL: http://localhost:8080/hello-world/path-variable/start
Referrer Policy: no-referrer-when-downgrade

Response Header

Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 0
Date: Tue, 28 Jan 2020 11:11:49 GMT
Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
WWW-Authenticate: Basic realm="Realm"
WWW-Authenticate: Basic realm="Realm"
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

request head

Accept: application/json, text/plain, / Accept-Encoding: gzip, deflate, br Accept-Language: en,cs;q=0.9,en-US;q=0.8 Authorization: Basicc3RhcnQ6ZWVuZA== Connection: keep-alive Host: localhost:8080 Origin: http://localhost:4200 Referer: http://localhost:4200/welcome/start Sec-Fetch-Mode: cors Sec-Fetch-Site: same-site User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

and in console, I see this error

Answer 1

Try to add cors policy in your security configuration:

@Configuration
@EnableWebSecurity
public class SpringSecurityConfigurationBasicAuth extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {    
            http.csrf().disable();
            http.cors();
            http.authorizeRequests()
                .antMatchers(HttpMethod.OPTIONS,"/**").permitAll()
                    .anyRequest().authenticated()
                    .and()
//            .formLogin().and()
                .httpBasic();
    }
}

Answer 2

to the class SpringSecurityConfigurationBasicAuth try to add this method

@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;
  }