React前端请求Spring Boot后端出现CORS跨域问题求助

问题原因 #

浏览器将CORS请求分为简单请求和非简单请求两类，你遇到的差异是两类请求的处理逻辑不同导致的：

• 登录请求通常是POST方法，仅携带Content-Type: application/x-www-form-urlencoded这类标准头，属于简单请求，不会发送预检OPTIONS请求，直接触发实际请求，所以你在过滤器中加的跨域头能正常返回，不会触发CORS错误。
• 其他请求（比如你提到的/tasks接口请求）大概率是带了自定义Authorization头、使用了PUT/DELETE方法、或者Content-Type为application/json，属于非简单请求。浏览器会先发送无认证信息的OPTIONS预检请求，探测服务端是否允许跨域。而你的AuthorizationFilter会校验请求的认证状态，OPTIONS请求没有携带认证凭证，被过滤器直接拦截返回错误响应，没有附加上Access-Control-Allow-Origin头，所以浏览器报CORS校验失败。

解决方案 #

方案1：过滤器中直接处理预检请求（快速修复） #

修改你的AuthorizationFilter逻辑，在过滤器最前端先判断请求方法是否为OPTIONS，如果是，直接添加必要的CORS头后返回200响应，不做认证校验：

@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
    // 优先处理OPTIONS预检请求
    if ("OPTIONS".equals(request.getMethod())) {
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setStatus(HttpServletResponse.SC_OK);
        return;
    }
    // 原有认证逻辑保持不变
    // ...
}

方案2：使用Spring Boot标准CORS配置（更推荐） #

不要在过滤器里手动加跨域头，直接用Spring官方提供的CORS配置方式，会自动处理所有预检请求，无需手动判断请求类型：

1. 新增CORS全局配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

2. 如果项目集成了Spring Security，需要在Security配置中放行OPTIONS请求，同时启用CORS支持：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            // 原有其他安全配置保持不变
            .authorizeRequests()
            .antMatchers(HttpMethod.OPTIONS, "/**").permitAll() // 放行所有OPTIONS预检请求
            .anyRequest().authenticated()
            .and()
            .cors(); // 启用Spring Security的CORS支持，关联上面的全局CORS配置
    }
}

配置完成后删除你原来在AuthorizationFilter里手动加Access-Control-Allow-Origin头的代码即可，避免重复配置冲突。

注意事项 #

• 生产环境如果需要配置多允许域名，可以把allowedOrigins参数改为列表传入多个值即可，不要直接用*通配符，否则带Cookie/认证头的跨域请求会校验失败。
• 确保没有其他自定义过滤器在CORS逻辑执行前拦截了OPTIONS请求。

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