Spring Boot跨域错误（CORS问题）：如何配置允许跨域请求？

核心问题 #

你的CORS错误根源是后端Spring Boot的CORS配置未包含前端实际的请求源：

• 前端代码中调用的后端地址是http://localhost:4242，但前端自身的运行地址（Origin）应该是另一个端口（比如http://localhost:8080或http://localhost），而当前CORS配置只允许https://mywebsite.com和https://localhost:8443，完全不匹配前端的HTTP协议和端口。
• 同时重复配置了CORS规则（WebMvcConfigurer的addCorsMappings和CorsFilter Bean），可能导致规则冲突。

解决方案步骤 #

1. 确定前端的实际Origin

打开浏览器开发者工具（F12），切换到「网络」标签，找到触发CORS错误的请求，查看Request Headers里的Origin字段，比如可能是http://localhost:8080或http://localhost。

2. 修正Spring Boot的CORS配置

保留一种配置方式（推荐使用CorsFilter，避免与其他Spring组件冲突），并加入前端的实际Origin：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        
        // 替换成你从浏览器获取到的前端实际Origin
        config.addAllowedOrigin("http://localhost:8080");
        // 保留生产环境域名
        config.addAllowedOrigin("https://mywebsite.com");
        
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

注意：如果前端用HTTP协议，不要添加HTTPS的地址；如果前端端口不是8443，就不要配置https://localhost:8443（除非你确实有HTTPS的前端服务）。

3. 优化前端请求（可选）

GET请求无需设置Content-Type请求头，可移除fetch(${baseUrl}/config)中的该字段，避免不必要的请求头：

const configResponse = await fetch(`${baseUrl}/config`, {
  method: 'GET',
  headers: {
    'Accept': 'application/json'
    // 移除Content-Type配置
  }
});

4. 验证配置

重启Spring Boot后端，重新测试前端的「Subscribe」按钮，查看浏览器开发者工具的网络请求，确认CORS响应头（Access-Control-Allow-Origin等）是否包含前端的Origin。

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