Enable CORS origin graphql

Question

I'm working on graphQL and spring boot project. The API works well using graphiQL but when trying to consume it using Apollo vueJS, it causes CORS origin error.

I'm using @CrossOrigin annotation in ProductQuery class which implements GraphQLQueryResolver like below:

 @CrossOrigin(origins = "https://localhost:8081")
public List<Product> getProducts(){return this.productService.findAll(); } 

Here is the error displayed on frontEnd project:

I appreciate your help.

Divisible

Answer 1

For local development you may need a CorsFilter bean to enable your local origin:

@Configuration
@Profile("local")
public class LocalCorsConfiguration {

  @Bean
  public CorsFilter corsFilter() {
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("http://localhost:3000");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/graphql/**", config);
    return new CorsFilter(source);
  }
}

Don't forget to start the application with -Dspring.profiles.active=local.

Totemism

Answer 2

Since Spring Boot 2.7.0 there are configuration properties for CORS with GraphQL:

spring:
  graphql:
    cors:
      allow-credentials: true
      allowed-origins:
        - http://localhost:3000

See GraphQlCorsProperties.java for further properties.

Janik

Answer 3

What worked for me was the solution explained in the official docs

My version of a configurer bean looks like this:

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

Sandfly

Answer 4

To solve this issue you need to add this in your application properties graphql.servlet.corsEnabled: true after that your server response header will have the CORS properties.

Carmeliacarmelina

Answer 5

I had the same issue. My solution is a "remake" of whipper slapper's answer. The docs are saying, that you need to add the corsConfigurer-@Bean to your Application Class. This is, what it looks like in Kotlin:

@Bean
fun corsConfigurer(): WebMvcConfigurer {
    return object : WebMvcConfigurer {
        override fun addCorsMappings(registry: CorsRegistry) {
            registry.addMapping("/graphql/**")
                .allowedOrigins(CorsConfiguration.ALL)
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
        }
    }
}

Flugelhorn

Answer 6

@whipper slapper's answer worked for me along with some configs in the Application.properties,

@Configuration
@Profile("local")
public class LocalCorsConfiguration {
  @Bean
  public CorsFilter corsFilter() {
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("http://localhost:3000");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/graphql/**", config);
    return new CorsFilter(source);
  }
}

I added the above code to @SpringBootApplication file underneath the definition function, and to run it in the local profile I added spring.profiles.active=local to the application.properties file, Altogether my application.properties file looked like this

spring.application.name=tut
spring.graphql.graphiql.enabled=true
spring.graphql.cors.allowed-origins='http://localhost:3000'
spring.graphql.cors.allow-credentials=true
graphql.servlet.corsEnabled: true
spring.profiles.active=local

Tereus