基于Spring Security Authorization Server的React OAuth2.0登录问题排查

一、CORS错误的原因及修复 #

核心问题 #

React应用（3000端口）向认证服务（9000端口）发起跨域请求时，认证服务未针对OAuth2相关端点配置正确的CORS规则，导致浏览器拦截请求；同时授权请求参数存在拼写错误，加剧了跨域校验异常。

配置修正 #

1. 为OAuth2端点配置专属CORS规则
   Spring Authorization Server的oauth2/authorize、login等端点需要单独配置CORS，不能仅依赖全局配置。在SecurityFilterChain中添加CORS过滤器：

@Bean
public SecurityFilterChain authorizationServerSecurityFilterChain(HttpSecurity http) throws Exception {
    OAuth2AuthorizationServerConfiguration.applyDefaultSecurity(http);
    http
        .cors(cors -> cors.configurationSource(corsConfigurationSource()))
        .formLogin(form -> form.loginPage("/login").permitAll());
    return http.build();
}

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:3000"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "OPTIONS"));
    configuration.setAllowedHeaders(Arrays.asList("*"));
    configuration.setAllowCredentials(true);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/oauth2/**", configuration);
    source.registerCorsConfiguration("/login/**", configuration);
    return source;
}

2. 修正授权请求参数名
   将请求中的redirect_url改为OpenID标准参数redirect_uri（下划线对应uri），参数名错误会导致认证服务无法识别目标重定向地址，同时触发跨域校验问题。

二、登录后无授权码、跳转错误页面的原因及修复 #

核心问题 #

1. 参数不匹配：错误页面显示client_id=web，但请求中使用的是articles-client，客户端配置存在不一致；redirect_url参数名错误导致认证服务无法生成授权码。
2. 登录跳转逻辑缺失：自定义登录页成功后未传递授权流程的continue参数，导致认证服务无法恢复授权流程，无法生成授权码。

配置修正 #

1. 修正授权请求URL
   将React端的请求改为符合标准的格式，同时添加强制要求的state参数（用于CSRF防护）：

http://localhost:9000/oauth2/authorize?redirect_uri=http://localhost:3000/profile&scope=openid%20profile&client_id=articles-client&response_type=code&state=随机字符串

确保redirect_uri与认证服务中客户端配置的地址完全一致。

2. 同步客户端配置
   调整认证服务的客户端配置，确保client_id为articles-client且包含正确的重定向地址：

@Bean
public RegisteredClientRepository registeredClientRepository() {
    RegisteredClient articlesClient = RegisteredClient.withId(UUID.randomUUID().toString())
        .clientId("articles-client")
        .clientSecret("{noop}your-client-secret")
        .clientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_BASIC)
        .authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE)
        .redirectUri("http://localhost:3000/profile")
        .scope(OidcScopes.OPENID)
        .scope(OidcScopes.PROFILE)
        .build();
    return new InMemoryRegisteredClientRepository(articlesClient);
}

3. 修复登录成功后的跳转逻辑
   自定义登录接口处理成功后，需重定向到认证服务的授权继续端点，携带原请求的continue参数（该参数由认证服务重定向到登录页时自动附加）：

@PostMapping("/login")
public String login(HttpServletRequest request, Authentication authentication) {
    // 执行登录校验逻辑
    String continueUrl = request.getParameter("continue");
    if (continueUrl != null) {
        return "redirect:" + continueUrl;
    }
    return "redirect:/";
}

同时确保自定义登录页的表单提交时，传递continue参数。

额外注意事项 #

• 确保/login及/login/**端点允许匿名访问，避免未登录时被拦截。
• 授权码流程中，React应用后续用授权码请求令牌时，若前端直接调用oauth2/token端点，需为该端点也配置CORS；更安全的做法是通过后端代理请求令牌，避免暴露客户端密钥。

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