Spring Gateway Request blocked by CORS (The 'Access-Control-Allow-Origin' header contains multiple values, but only one is allowed)

Question

I have created a gateway API (spring boot) to route to a number of backend services (spring boot applications) for the frontend (Typescript), but I keep getting CORS error when the frontend tries to hit the Gateway API, even though it works fine on Postman.

This is the error i got on the console:

Access to fetch at 'https://gatway-api-ip-address:port/level/global' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, http://localhost:3000', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Here's what I have inside the Gateway API, application.yml:

  cloud:
    gateway:
      default-filters:
        - DedupeResponseHeader=Access-Control-Allow-Credentials Access-Control-Allow-Origin
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins:
            - "http://localhost:3000"
            - "http://localhost:8000"
            - "http://frontend-ip-address:port"
            allowCredentials: true
            allowedMethods:
              - GET
              - POST
              - DELETE
              - GET
              - OPTIONS
            allowedHeaders: "*"

Note: that the IP address for each backend service, frontend service and gateway API is the same as they're hosted on one Digital Ocean server.

Note: I have issued a self-signed ssl certificate for the gateway api

Answer 1

Surely the target resource also has its own CORS configuration, which is why it's duplicated. Disable CORS on the target resource if you have control over it, or remove the Origin header from the request using the filter.

filters:
- RemoveRequestHeader=Origin