React与SpringBoot应用全局CORS配置失效问题求助

问题描述 #

跨源请求被阻止：同源策略不允许读取http://localhost:8080/echo的远程资源。（原因：缺少CORS头‘Access-Control-Allow-Origin’）。状态码：403。

已配置SpringBoot全局CORS配置如下，但全局配置无效，仅方法级CORS配置可正常工作：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                    .allowedOrigins("http://localhost:3000")
                    .allowedMethods("*")
                    .allowedHeaders("*")
                    .allowCredentials(true);
            }
        };
    }
}

排查与解决方案 #

1. 确认配置类被Spring容器扫描

检查CorsConfig类所在包是否被@SpringBootApplication的scanBasePackages覆盖，或直接将配置类放在启动类的同级/子包下，确保Spring能加载该配置Bean。

2. 处理Spring Security拦截冲突

若项目集成了Spring Security，默认安全规则会在CORS过滤器前拦截请求，导致全局配置的CORS头无法生效。需在Security配置中单独启用CORS：

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import java.util.Arrays;

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()
            .csrf().disable()
            .authorizeRequests()
            .anyRequest().permitAll();
    }

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

3. 调整自定义过滤器执行顺序

若项目存在自定义过滤器，且其执行顺序早于Spring默认CORS过滤器，会导致请求被提前拦截。可通过设置高优先级确保CORS过滤器先执行：

import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        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", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}
}

添加此过滤器后，可移除原WebMvcConfigurer方式的全局配置，避免冲突。

4. 验证Origin匹配性

确认React应用的访问地址确实是http://localhost:3000，无端口、协议（如http/https）错误。若需支持多个源，可通过Arrays.asList("http://localhost:3000", "http://xxx")扩展配置。

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