基于Eureka与Spring Cloud Gateway的React+Spring微服务CORS问题求助

核心问题分析 #

你的配置存在两个关键冲突点：

1. Spring Cloud Gateway基于WebFlux响应式框架，你使用了Servlet环境的CorsFilter，该过滤器在Gateway中不会生效，反而会和全局CORS配置产生冲突。
2. 各微服务重复配置CORS，导致响应头中出现重复的跨域字段，浏览器会因头信息不合法拒绝响应。

正确解决方案步骤 #

1. 移除所有微服务中的CORS配置

删除所有后端微服务内的WebConfig类、@CrossOrigin注解及任何CORS相关配置。跨域统一由API Gateway处理，微服务无需单独配置。

2. 选择以下一种Gateway CORS配置方式（二选一）

方式一：使用application.properties全局配置

删除Gateway中的WebConfig类，修改application.properties配置如下：

server.port=8082
spring.application.name=api-gateway
eureka.client.service-url.defaultZone=http://localhost:8081/eureka
logging.pattern.console=%C{1.} [%-5level] %d[HH:mm:ss] - %msg%n
spring.cloud.gateway.discovery.locator.enabled=true
spring.cloud.gateway.discovery.locator.lower-case-service-id=true # 修正笔误：原配置的userId应为service-id

# 全局CORS配置
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowed-origins=http://localhost:3000
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowed-headers=*
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowed-methods=GET,POST,PUT,DELETE,OPTIONS
spring.cloud.gateway.globalcors.cors-configurations.[/**].allow-credentials=true # 前端带凭证（如Cookie、Token）时设为true，否则设为false
spring.cloud.gateway.globalcors.cors-configurations.[/**].exposed-headers=* # 暴露自定义响应头给前端

方式二：使用WebFlux专属的CorsWebFilter（代码配置）

删除application.properties中的全局CORS配置，创建Gateway专属的CORS配置类：

@Configuration
public class GatewayCorsConfig {

    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration corsConfig = new CorsConfiguration();
        // 指定允许的源，带凭证时不能用*
        corsConfig.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));
        corsConfig.setAllowedHeaders(Collections.singletonList("*"));
        corsConfig.setAllowedMethods(Collections.singletonList("*"));
        corsConfig.setAllowCredentials(true);
        corsConfig.setExposedHeaders(Collections.singletonList("*"));

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfig);

        return new CorsWebFilter(source);
    }
}

关键注意事项 #

• 凭证请求限制：如果前端需要发送带凭证（如Authorization头、Cookie）的请求，allow-credentials必须设为true，且allowed-origins不能使用*，必须指定具体的前端域名（如http://localhost:3000），这是浏览器的安全限制。
• 清除缓存：测试前请清除浏览器缓存或使用无痕模式，避免旧的响应头干扰。
• 预检请求处理：Gateway会自动处理OPTIONS预检请求，无需额外配置路由规则。
• 路由正确性：确认通过Gateway访问微服务的URL格式正确（如http://localhost:8082/微服务名称/接口路径），确保服务发现路由正常。

内容的提问来源于stack exchange，提问作者Artem Dubenko