How do you handle adding a CORS header in a Spring Boot server with graphql-kotlin?

Question

I am building a simple Spring Server project using the GraphQL Kotlin library created & open-sourced by Expedia. I have a backend up and running, talking to the datastore, and I'm able to fetch data by sending queries via Playground.

When I try to connect from my React frontend (using Apollo), the initial OPTIONS request gets a 404 response due to a CORS issue. I am relatively new to Spring Boot and there are a lot of potential approaches documented on SO and elsewhere.

How do I intercept the response & add the appropriate Access-Control-Allow-Origin header?

score 2 · Accepted Answer · answered Jan 05 '20 at 23:27

After trying many of the aforementioned approaches, I found one that worked for my particular combination of variables.

These, for example, did not work:

WebFluxConfigurer component that overrides the addCorsMappings function
@CrossOrigin annotation on the query function
Add the spring boot actuator lib to the project and add management.endpoints.web.cors config to the application.yml, per the Spring documentation

What ultimately did work for me was a custom WebFilter subclass, per this SO question: Enable CORS in Spring 5 Webflux?

and also this tutorial, which illuminated a lot about how Spring Boot works in general.

score 2 · Answer 2 · answered Mar 03 '20 at 14:42

You can do like this:

 @Bean
    @Profile("!production")
    fun corsFilter(): CorsWebFilter = CorsWebFilter(
        UrlBasedCorsConfigurationSource().apply {
            registerCorsConfiguration(
                "/**",
                CorsConfiguration().apply {
                    allowCredentials = true
                    allowedOrigins = listOf("*")
                    allowedHeaders = listOf("*")
                    allowedMethods = listOf("*")
                }
            )
        }
    )

score 1 · Answer 3 · answered Dec 07 '20 at 22:37

For me (using same technologies like you), creating custom filter component (CorsFilter) worked the best out of all other options:

Example of my configuration:

@Component
class CorsFilter: WebFilter {

    @Value("\${cors.allowed_origin}")
    lateinit var allowedOrigin: String

    override fun filter(ctx: ServerWebExchange, chain: WebFilterChain): Mono<Void> {
        ctx.response.headers.add("Access-Control-Allow-Origin", allowedOrigin)
        ctx.response.headers.add("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS")
        ctx.response.headers.add("Access-Control-Allow-Credentials", "true")
        ctx.response.headers.add("Access-Control-Allow-Headers", "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range, Authorization")
        return when {
            ctx.request.method == HttpMethod.OPTIONS -> {
                ctx.response.headers.add("Access-Control-Max-Age", "1728000")
                ctx.response.statusCode = HttpStatus.NO_CONTENT
                Mono.empty()
            }
            else -> {
                ctx.response.headers.add("Access-Control-Expose-Headers", "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range")
                chain.filter(ctx)
            }
        }
    }
}

note: allowedOrigin variable is taken from applications.properties files

Michael Nieto · Answer 4 · 2020-02-20T03:30:38.287

Only adding the next configuration in spring boot-kotlin server work with React and Apollo:

import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import org.springframework.http.HttpMethod
import org.springframework.http.HttpStatus
import org.springframework.web.cors.reactive.CorsUtils
import org.springframework.web.server.WebFilter
import reactor.core.publisher.Mono

@Configuration
class ReactiveConfigurations {

    companion object {
        const val ALLOWED_HEADERS = "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN"
        const val ALLOWED_METHODS = "GET, PUT, POST, DELETE, OPTIONS"
        const val ALLOWED_ORIGIN = "*"
        const val MAX_AGE = "3600"
    }

    @Bean
    fun corsFilter(): WebFilter {
        return WebFilter { ctx, chain ->
            val request = ctx.request
            if (CorsUtils.isCorsRequest(request)) {
                val response = ctx.response
                val headers = response.headers
                headers.add("Access-Control-Allow-Origin", ALLOWED_ORIGIN)
                headers.add("Access-Control-Allow-Methods", ALLOWED_METHODS)
                headers.add("Access-Control-Max-Age", MAX_AGE)
                headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS)
                if (request.method === HttpMethod.OPTIONS) {
                    response.statusCode = HttpStatus.OK
                    return@WebFilter Mono.empty<Void>()
                }
            }
            chain.filter(ctx)
        }
    }
}

How do you handle adding a CORS header in a Spring Boot server with graphql-kotlin?

4 Answers4