Access-control-allow-origin not allowed when calling Spring Boot from Angular App

Question

I have one Angular 8 app calling Spring boot REST API, i came across CORS problem that i can't really solve even after some googling.

http://localhost:4200 ---------------> http://localhost:8080

The error says: Access to XMLHttpRequest at 'http://localhost:8080/api/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

I understand a pre-flight request will be sent first before an actual request sent.

My spring boot server side has enabled CORS:

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.csrf().disable().cors().and().authorizeRequests()
                   ... other configurations
}

@Bean
public CorsFilter corsFilter() {
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration config = new CorsConfiguration();
    config.setAllowedOrigins(Collections.singletonList("*")); // Provide list of origins if you want multiple origins
    config.setAllowedHeaders(Arrays.asList("Origin", "Content-Type", "Accept", "Access-Control-Allow-Headers", "X-Requested-With", "Authorization"));
    config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH"));
    config.setAllowCredentials(true);
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

My Angular side:

login(username, password) {
        const httpOptions = {
            headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'Access-Control-Allow-Origin, Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization',
            'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE.OPTIONS'

            })}
        return this.http.post<any>(`http://localhost:8080/api/login`, { username, password }, httpOptions)
            .pipe(map(user => {
                return user;
            }));
    }

In your frontend JavaScript code, temove all of the `Access-Control-Allow-\*` headers from the `headers` block. Those are all response headers. Trying to set them as request headers isn’t going to work. — sideshowbarker, May 01 '20 at 13:29
The error says what the problem is; `Access-Control-Allow-Origin` is not an allowed header, and it's not in the list passed to `setAllowedHeaders`. — Heretic Monkey, May 01 '20 at 13:36

David · Accepted Answer · 2020-05-01T14:30:48.973

Remove your Access-Control-Allow -*** headers from angular request.

For a start, these are server side headers. But adding them to your client request also have a downwside.

According to CORS, if you want to add custom headers to your request (i.e. headers other than safelisted headers (Accept, Accept-Language, Content-Type and Content-Language), your server should respond to the OPTIONS request with Access-Control-Allow-Headers header, specifying the list of accepted custom headers.

Access-control-allow-origin not allowed when calling Spring Boot from Angular App

1 Answers1