Spring Cloud Gateway对接React时CORS跨域头重复问题解决

问题原因 #

这个错误是因为网关和后端微服务同时配置了CORS规则，导致响应头中重复添加了Access-Control-Allow-Origin字段，浏览器只允许该字段存在一个值，因此拦截了请求。

解决方案 #

1. 移除后端微服务的CORS配置 #

检查你的ADMIN-SERVICE、CUSTOMER-SERVICE等所有被网关路由的微服务，确保它们没有单独配置CORS（比如通过@CrossOrigin注解或者全局CORS配置类）。跨域规则统一由网关处理即可，避免重复设置。

2. 修正网关的CORS配置 #

你的网关配置存在两处细节问题，修改后如下：

server:
  port: 9191

spring:
  application:
    name: API-GATEWAY
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins: "http://localhost:3000"  # 去掉末尾斜杠，使用正常双引号
            allowedMethods:
            - GET
            - POST
            - PUT
            - DELETE
            allowedHeaders: "*"  # 可选：允许所有请求头，按需调整
            allowCredentials: true  # 可选：需携带Cookie等凭证时开启
        
      routes:
        - id: ADMIN-SERVICE
          uri: lb://ADMIN-SERVICE
          predicates:
            - Path=/admin/**
        - id: CUSTOMER-SERVICE
          uri: lb://CUSTOMER-SERVICE
          predicates:
            - Path=/customer/**
        - id: DEALER-SERVICE
          uri: lb://DEALER-SERVICE
          predicates:
            - Path=/dealer/**
        - id: VENUE-SERVICE
          uri: lb://VENUE-SERVICE
          predicates:
            - Path=/venue/**
       
eureka:
  client:
    fetch-registry: true
    register-with-eureka: true
    service-url:
      defaultZone: http://localhost:8761/eureka/
  instance:
    hostname: localhost

• 去掉allowedOrigins中地址末尾的斜杠，避免解析时出现不必要的匹配问题
• 替换配置中的转义双引号"为正常双引号，确保配置正确加载
• 可选添加allowedHeaders: "*"和allowCredentials: true，适配需要携带自定义头或凭证的场景

3. 重启服务 #

修改完成后，重启Spring Cloud Gateway和所有相关微服务，再测试React应用的接口请求即可。

内容的提问来源于stack exchange，提问作者Dhanashree Patil