Spring Boot3+OAuth2前端请求出现No Access-Control-Allow-Origin跨域问题

核心问题本质 #

你遇到的不是单纯的CORS配置问题，而是OAuth2授权码流程设计逻辑与AJAX跨域请求的冲突：

• 当React用AJAX请求后端受保护接口时，Spring Security会返回302重定向到Github/Google的授权页面
• 跨域场景下，浏览器不允许AJAX请求的重定向响应携带Access-Control-Allow-Origin头（最终重定向到的第三方授权页面不会配置你的前端域名），直接触发CORS报错

解决方案 #

方案1：前端直接跳转授权（推荐，符合OAuth2最佳实践） #

放弃用AJAX请求受保护接口，改为让浏览器直接发起跳转：

• 在React中，当用户需要访问受保护资源时，直接跳转到后端的授权入口：

  window.location.href = 'http://localhost:8080/oauth2/authorization/github';
  

• 授权完成后，后端会跳转到你配置的回调地址（需在Github/Google开发者后台和Spring Boot配置中设置），此时前端可以从回调中获取授权信息，再正常发起AJAX请求。

方案2：调整后端CORS与Security过滤器顺序 #

如果坚持用AJAX触发授权，需要确保CORS过滤器在Spring Security的过滤器之前执行，同时允许重定向的CORS处理：

1. 修改WebSecurityConfig，确保CORS配置优先：

   @Configuration
   public class WebSecurityConfig {
       @Bean
       CorsConfigurationSource corsConfigurationSource() {
           CorsConfiguration configuration = new CorsConfiguration();
           configuration.setAllowedOrigins(List.of("http://localhost:3000"));
           configuration.setAllowedMethods(List.of("HEAD", "GET", "PUT", "POST", "DELETE", "PATCH"));
           configuration.setAllowedHeaders(List.of("*"));
           configuration.setAllowCredentials(true); // 允许携带凭证（如Cookie）
           configuration.setExposedHeaders(List.of("Location")); // 暴露重定向头
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
           source.registerCorsConfiguration("/**", configuration);
           return source;
       }
   
       @Bean
       public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
           http
               .cors(cors -> cors.configurationSource(corsConfigurationSource())) // 明确指定CORS配置
               .csrf(csrf -> csrf.disable())
               .authorizeHttpRequests(auth -> auth.anyRequest().authenticated())
               .oauth2Login(oauth2 -> oauth2
                   .successHandler((request, response, authentication) -> {
                       // 授权成功后返回JSON响应，避免前端再次跳转
                       response.setContentType("application/json");
                       response.getWriter().write("{\"status\":\"success\"}");
                   })
               );
           return http.build();
       }
   
       // 确保CORS过滤器在Security过滤器之前执行
       @Bean
       FilterRegistrationBean<CorsFilter> corsFilter() {
           FilterRegistrationBean<CorsFilter> registrationBean = new FilterRegistrationBean<>();
           registrationBean.setFilter(new CorsFilter(corsConfigurationSource()));
           registrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE); // 设置最高优先级
           return registrationBean;
       }
   }
   

2. 前端AJAX请求需携带凭证：

   axios.get('http://localhost:8080/your-protected-endpoint', { withCredentials: true })
   

方案3：使用OAuth2 PKCE模式（前端直接对接授权服务器） #

让React前端直接和Github/Google的授权服务器交互，通过PKCE模式获取access_token，再用token调用后端接口：

• 前端发起授权请求到Github/Google，获取授权码后交换access_token
• 后端配置为OAuth2资源服务器，验证前端传来的token即可，无需处理授权跳转

关键注意点 #

• 不要试图让第三方授权页面（如Github登录页）返回Access-Control-Allow-Origin头，第三方不会为你的域名配置CORS
• Spring Boot 3的Security配置采用Lambda风格语法，确保你使用的是最新配置方式
• 若使用Cookie保存会话，必须开启setAllowCredentials(true)，同时前端AJAX要携带凭证

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