Spring Cloud Gateway、Spring Boot后端、React前端集成Keycloak时的CORS配置及请求路由问题求助

阿华AIGC实验室

2026-4-2

嘿，我来帮你一步步拆解解决这个问题！你遇到的是微服务架构里非常典型的「CORS+路由+身份认证」组合坑，咱们分模块来搞定，先抓根源再补细节：

一、先堵死「请求绕过网关直接打后端」的漏洞

这是你当前CORS报错的核心原因之一——后端8090没配CORS，只要有请求直接打过去，浏览器肯定炸。咱们从两方面掐断这个路径：

1. 锁死React的请求入口

立刻检查你的React代码：

全局统一API的baseURL，比如用Axios的话，在项目初始化时设置：axios.defaults.baseURL = 'http://localhost:8081/api'
逐行排查所有请求代码，特别是登录、token相关的请求，有没有硬写localhost:8090或者localhost:8180的情况（很多人会把Keycloak的请求直接指向8180，这绝对要改！）
所有Keycloak相关的请求（比如拿token、登录页跳转），也必须走网关8081，不能直接调用Keycloak的8180端口

2. 补全Spring Cloud Gateway的路由配置

确保网关把所有需要的路径都转发到对应服务，比如：

spring:
  cloud:
    gateway:
      routes:
        # 转发后端API请求到8090
        - id: backend-api
          uri: http://localhost:8090
          predicates:
            - Path=/api/**
          filters:
            - StripPrefix=1 # 如果需要去掉/api前缀再转发的话
        # 转发Keycloak相关请求到8180
        - id: keycloak-auth
          uri: http://localhost:8180
          predicates:
            - Path=/realms/**, /auth/**

这样配置后，React只需要请求http://localhost:8081/realms/xxx/protocol/openid-connect/token，网关会自动转发到Keycloak的8180端口，全程和网关交互。

二、Spring Cloud Gateway的CORS正确配置（解决`allowCredentials`和`*`的冲突）

你说得对，allowCredentials: true和allowedHeaders: "*"是完全冲突的，必须明确列出所有允许的请求头，包括业务和身份认证相关的。给你个可以直接用的配置，不管是Java代码还是YAML都能搞定：

YAML配置方式

spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowed-origins: "http://localhost:3000" # 只允许React的源，开发环境可以这么写
            allowed-methods: "*" # 方法可以用*，这个和allowCredentials不冲突
            allowed-headers: "Authorization,Content-Type,Accept,Origin,X-Requested-With,Access-Control-Request-Method,Access-Control-Request-Headers,X-XSRF-TOKEN"
            allow-credentials: true
            max-age: 3600 # 预检请求缓存1小时，减少OPTIONS请求次数
            exposed-headers: "Authorization" # 允许前端拿到响应里的Authorization头

Java配置类方式（如果你喜欢代码配置）

@Configuration
public class GatewayCorsConfig {

    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        config.setAllowedHeaders(Arrays.asList(
            "Authorization",
            "Content-Type",
            "Accept",
            "Origin",
            "X-Requested-With",
            "Access-Control-Request-Method",
            "Access-Control-Request-Headers",
            "X-XSRF-TOKEN"
        ));
        config.setAllowCredentials(true);
        config.setExposedHeaders(Collections.singletonList("Authorization"));
        config.setMaxAge(3600L);

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

        return new CorsWebFilter(source);
    }
}

这个配置完全符合allowCredentials: true的规范，没有用*作为allowedHeaders，同时覆盖了所有业务和Keycloak需要的请求头。

三、Keycloak的CORS配置（解决Keycloak端点的CORS报错）

Keycloak确实会自带CORS规则，和网关的配置可能冲突，咱们直接在Keycloak后台配置允许React的源：

登录Keycloak admin后台，进入你的目标Realm
找到「Realm Settings」→「Security Defenses」→「CORS」
在「Allowed Origins」里添加http://localhost:3000，开启「Allow Credentials」，允许的方法和头和网关配置保持一致就行
保存配置，重启Keycloak（开发环境可能不需要重启，但生产环境建议重启生效）

这样配置后，当网关转发React的请求到Keycloak时，Keycloak会识别到合法的Origin，不会返回CORS错误。

四、调试和验证的小技巧

浏览器Network面板查请求：打开开发者工具的Network标签，确认所有请求的地址都是localhost:8081，没有8090或8180的请求，如果有，立刻找对应代码修改
网关日志看路由：开启网关的DEBUG日志，配置logging.level.org.springframework.cloud.gateway=DEBUG，这样能看到每个请求的路由过程，确认所有请求都被网关接收并转发
盯紧CORS错误细节：浏览器的Console里的CORS错误会明确告诉你是「源不允许」还是「头不允许」，比如提示Access-Control-Allow-Headers里没有某个头，就把这个头加到网关的allowedHeaders里
检查预检请求：浏览器会先发OPTIONS预检请求，看这个请求的响应头里有没有Access-Control-Allow-Origin: http://localhost:3000和Access-Control-Allow-Credentials: true，如果没有，说明网关的CORS配置没生效