添加身份凭证后Spring Boot+React跨域请求报错排查

你的核心问题是Spring Security的CORS拦截优先级高于WebMvc的全局配置，导致单独配置的WebConfig未生效，尤其在携带身份凭证的跨域请求场景下。以下是具体排查点和解决方法：

一、关键排查方向 #

• Spring Security会在WebMvc的CORS过滤器之前拦截请求，若未在Security配置中启用CORS，全局CORS规则会被直接忽略
• 携带凭证时，Access-Control-Allow-Origin必须是具体域名（不能用*），且前后端域名需完全匹配（包括协议、端口，不能带多余的末尾斜杠）
• 预检请求（OPTIONS）未被正确放行，导致实际业务请求被拦截

二、分步解决方案 #

1. 修正Spring Security配置，启用CORS #

在Security配置类中明确启用CORS，确保CORS过滤器在Security拦截链中优先执行，同时复用WebMvc的全局CORS规则：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                // 启用CORS，复用WebMvc的全局配置
                .cors(Customizer.withDefaults())
                // 前后端分离场景建议禁用CSRF（或按需配置CSRF令牌传递逻辑）
                .csrf(csrf -> csrf.disable())
                .authorizeHttpRequests(auth -> auth
                        // 放开公开接口权限
                        .requestMatchers("/api/public/**").permitAll()
                        // 其他接口需认证
                        .anyRequest().authenticated()
                )
                // 根据你的认证方式调整（比如JWT、HTTP Basic等）
                .httpBasic(Customizer.withDefaults())
                // 无状态会话（前后端分离架构常用）
                .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS));
        
        return http.build();
    }
}

2. 修正全局CORS配置（WebConfig） #

确保域名格式正确，允许必要的请求方法和头，明确开启凭证支持：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                // 精确匹配前端域名，不要加末尾斜杠
                .allowedOrigins("http://localhost:3000")
                // 允许所有常用HTTP方法，包含OPTIONS预检请求
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // 允许所有请求头（包括Authorization身份凭证头）
                .allowedHeaders("*")
                // 必须开启，对应前端的withCredentials配置
                .allowCredentials(true)
                // 预检请求缓存时长，减少重复OPTIONS请求
                .maxAge(3600);
    }
}

3. 验证前端Axios配置 #

确保请求开启凭证传递，且请求地址与后端允许的域名完全一致：

// Axios全局配置
axios.defaults.withCredentials = true;

// 单个请求配置示例
axios.get('http://localhost:8080/api/data', {
    withCredentials: true,
    headers: {
        'Authorization': 'Bearer ' + token
    }
});

4. 额外检查项 #

• 不要混用@CrossOrigin注解和全局CORS配置，避免规则冲突
• 用浏览器开发者工具查看响应头，确认存在Access-Control-Allow-Origin: http://localhost:3000和Access-Control-Allow-Credentials: true
• 检查预检请求（OPTIONS）的响应状态码是否为200，若被拦截需确认Security配置中已通过allowedMethods放行OPTIONS请求

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