Архитектура MicroService: Конфигурация CORS приводит к тому, что заголовок Access Control Allow Origin содержит несколько значений

Question

Я разрабатываю приложение для весенней загрузки. В котором есть API-Gateway и три микросервиса. Когда я вызываю API из пользовательского интерфейса, он выдает ошибку CORS.

Ошибка:

Разрешить контроль доступа Заголовок Origin содержит несколько значений, но разрешен только один

введите описание изображения здесь

Я уже настроил cors в application.yml в 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'

Наряду с этим я настроил CORS в каждой микросервисе. Вместо вызова API через API-шлюз, если я вызываю непосредственно микросервис, он работает нормально.

Answer 1

Заголовок Access Control Allow Origin содержит несколько значений, но разрешен только один предполагает, что вы отправляете несколько заголовков, которые не ожидаются.

Здесь вы настроили CORS как на шлюзе API, так и на each и микросервис, который вызывает проблему, чтобы избежать проблемы, вы можете настроить конфигурации CORS либо только на API-шлюзе, либо в каждой микросервисе.

Answer 2

Вам нужна конфигурация в вашем пользовательском интерфейсе.

Для angular создайте proxy.conf. js в одном пакете с пакетом. json

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

module.exports = PROXY_CONFIG;

Также вы нужно начать с ng serve --proxy-config proxy.conf. js

В реакции вы можете определить атрибут прокси в пакете. 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>"
}