React应用对接Spring Cloud Gateway及授权服务器出现CORS错误排查

以下是几个常见的问题点及排查方向：

1. Spring Cloud Gateway的CORS配置不完整或错误 #

网关作为请求入口，必须配置正确的CORS规则来允许http://localhost:3000的跨域请求，重点注意以下疏漏：

• 未明确指定allowed-origins为http://localhost:3000（不能用*同时开启allow-credentials，浏览器会直接拒绝此类配置）
• 未开启allow-credentials: true，但前端请求携带了Cookie或Authorization头
• 未覆盖必要的请求方法（如OPTIONS预检请求）或请求头（如OAuth2相关的Authorization头）

示例网关CORS配置（YAML）：

spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowed-origins: "http://localhost:3000"
            allowed-methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"]
            allowed-headers: "*"
            allow-credentials: true

2. CORS过滤器优先级低于Spring Security拦截器 #

如果网关集成了Spring Security（OAuth2客户端相关），CORS过滤器必须在Security拦截器之前执行，否则OPTIONS预检请求会被Security直接拦截返回401，无法触发正常的CORS响应。

Java配置中可通过@Order提升CORS过滤器优先级：

@Configuration
@Order(Ordered.HIGHEST_PRECEDENCE)
public class GatewayCorsConfig {
    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));
        config.setAllowedMethods(Collections.singletonList("*"));
        config.setAllowedHeaders(Collections.singletonList("*"));
        config.setAllowCredentials(true);

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

        return new CorsWebFilter(source);
    }
}

3. React请求未配置跨域凭证携带 #

如果网关开启了allow-credentials，前端请求必须明确设置携带凭证，否则浏览器会阻止跨域请求。

以Axios为例：

axios.get('http://localhost:8060/api/your-endpoint', {
  withCredentials: true,
  headers: {
    'Authorization': 'Bearer ' + yourAccessToken
  }
})

4. Spring Authorization Server的CORS配置缺失 #

如果前端需要直接与授权服务器（localhost:8000）交互（比如获取授权码、令牌），授权服务器也需要配置CORS规则，允许http://localhost:3000的跨域请求，否则授权流程中的请求会触发CORS错误。

示例授权服务器CORS配置（Java）：

@Configuration
public class AuthServerCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));
        config.setAllowedMethods(Collections.singletonList("*"));
        config.setAllowedHeaders(Collections.singletonList("*"));
        config.setAllowCredentials(true);

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

        return new CorsFilter(source);
    }
}

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