MicroService Architecture : CORS Configuration results in Access Control Allow Origin header contains multiple values

Question

I am developing a spring boot application. In which it has API-Gateway and three microservices. When I call API from UI it throws an error of CORS.

Error:

Access Control Allow Origin header contains multiple values but only one is allowed

I already configured cors in application.yml in API-Gateway.

spring:
    application:
        name: api-gateway
    cache:
        type: redis
    redis:
        host: 'http://localhost'
        port: 6379
    cloud:
        gateway:
            globalcors:
                corsConfigurations:
                '[/**]':
                allowedOrigins: "*"
                allowedMethods: "*"
                allowedHeaders: "*"
    eureka:
        client:
            eureka-server-d-n-s-name: my.dns
            eureka-service-url-Context: eureka
            fetch-registry: false
            region: ap-south-1b
            register-with-eureka: false
            use-dns-for-fetching-service-urls: true
        datacenter: cloud
    ribbon:
        eureka:
            enabled: false
    server:
        port: 8765
    zuul:
        routes:
            order-service:
                url: 'http://localhost:8088'
            product-service:
                url: 'http://localhost:8084'
            user-service:
                url: 'http://localhost:8082'

Along with that, I have configured CORS in each microservices. Instead of calling API via API-Gateway if I call directly to microservice, it is working fine.

Answer 1

Access Control Allow Origin header contains multiple values, but only one is allowed suggests that you are sending multiple headers that are not expected.

Here you configured CORS on both API Gateway and each and microservice which is causing the issue, to avoid the issue you may configure the CORS configurations on either only on API Gateway or in each microservice.

Answer 2

You need a configuration in you UI.

For angular create proxy.conf.js in the same package with package.json

const PROXY_CONFIG = [
  {
    context: [
      '/foo/**',
      '/bar/**'
    ],
    target: "http://localhost:8082",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

Also you need to start with ng serve --proxy-config proxy.conf.js

In react you can define proxy attribute in package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:<PORT-GOES-HERE>"
}