Angular 6 + Spring Boot: Error: “from origin 'http://localhost:4200' has been blocked by CORS policy”

Question

I am trying to connect angular 6 project with spring boot application. When I run angular project, it constantly gives this error, although I have installed all the dependen

Answer 1

This error is coming because request contains some additional headers which are not mentioned in your CORS filter configuration.

For adding CORS support during development, I generally prefer adding below spring configuration file. You need to have app.cors.enabled key with value true in your application configuration file (application.properties) also to make it work.

import org.springframework.context.annotation.Bean;
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@ConditionalOnProperty(name = "app.cors.enabled")
/**
* If the value of the key "app.cors.enabled" is true in application.properties file,
* then only this configuration will be enabled.
* 
*/
public class SpringConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/*").allowedHeaders("*").allowedOrigins("*").allowedMethods("*")
                        .allowCredentials(true);
            }
        };
    }
}

Make sure for production environment, you remove app.cors.enabled key from your configuration file or set its value to false. If you need CORS support in production environment also, make sure you use fixed values instead of allowing all values using *

Once you do that, there is no need of @CrossOrigin annotation on your controller.