通过CORS限制Spring后端访问后React前端无法连接，如何配置allowedOrigins？

问题分析 #

React前端在用户浏览器中运行，发起后端请求时的Origin是用户访问的前端公网地址（即PUBLIC_URL的值，比如https://acme.com/myapp），而非Pod容器内的localhost:8080。当前配置存在以下问题：

• svc.local.cluster是无效的Origin值，集群内部服务域名不会作为浏览器请求的Origin
• 存在带空格的无效地址 http://127.0.0.1:8080，空格会导致Origin匹配失败
• 容器内的localhost地址仅适用于本地开发调试，部署到EKS后对浏览器请求无意义

修正后的配置 #

@EnableWebSecurity
@Slf4j
public class WebMvcConfigurerConfig {
    @Value("${PUBLIC_URL}")
    private String publicUrl;
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                log.info("Allowed CORS origin: {}", publicUrl);
                registry.addMapping("/**")
                        // 允许公网前端地址
                        .allowedOrigins(publicUrl)
                        // 保留本地开发所需的地址（可选，方便本地调试）
                        .allowedOrigins("http://localhost:8080", "http://localhost:8081", "http://127.0.0.1:8080")
                        // 允许常用的HTTP方法
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                        // 允许携带自定义头信息（比如Authorization）
                        .allowedHeaders("*")
                        // 允许携带Cookie（如果业务需要的话）
                        .allowCredentials(true);
            }
        };
    }

    // 注意：使用@EnableWebSecurity时，必须在SecurityFilterChain中启用CORS
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                .cors(Customizer.withDefaults()) // 启用配置好的CORS规则
                .csrf(csrf -> csrf.disable()) // 前端无CSRF需求时可禁用，按需调整
                .authorizeHttpRequests(auth -> auth.anyRequest().permitAll()); // 根据实际权限逻辑调整
        return http.build();
    }
}

关键注意事项 #

1. PUBLIC_URL的准确性：确保PUBLIC_URL的值与用户实际访问前端的地址完全一致（包括协议、域名、端口，若有路径也需完整包含），CORS的Origin匹配是精确匹配规则。
2. 本地开发适配：保留localhost相关地址是为了方便本地调试，生产环境可根据需求移除。
3. WebSecurity生效规则：使用@EnableWebSecurity注解时，必须在SecurityFilterChain中调用.cors(Customizer.withDefaults())，否则自定义的CORS配置不会生效。

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