CODEWITHSUNDEEP
reactjscorsspring-cloud-gateway
Smit
Smit

Reputation: 2138

Spring Cloud Gateway - CORS Preflight with React <> Spring Cloud Gateway <> NodeJS

I am trying to setup a Cloud Gateway between React App and NodeJS application

Below is error I am getting on ReactApp:

Access to XMLHttpRequest at 'http://localhost:8080/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am already tried below link, as much may be with newer version of Cloud Gateway it is not working.

Attempt #1:

spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedOrigins=*
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedMethods=*

With this I was getting Header issue so I added:

spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedHeaders=*

I am getting below error:

The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, *', but only one is allowed.

Attempt #2:

I tried adding the following bean:

@Bean
  Function<GatewayFilterSpec, UriSpec> brutalCorsFilters() {
    return f -> f
        .setResponseHeader("Access-Control-Allow-Origin", "*")
        .setResponseHeader("Access-Control-Allow-Methods", "*")
        .setResponseHeader("Access-Control-Expose-Headers", "*");
  }

But still no luck

Repo: https://github.com/shah-smit/quizroulette-spring-cloud-api-gateway

Upvotes: 0

Views: 350

Answers (1)

Junyong
Junyong

Reputation: 61

Please check your configuration carefully, it should be your configuration that caused multiple values, refer to this The 'Access-Control-Allow-Origin' header contains multiple values

Maybe you can debug your code and find out where 'Access-Control-Allow-Origin' becomes two values.

Upvotes: 0

Related Questions