React前端与Spring Boot后端CORS跨域通信失败问题咨询

你的配置存在的问题 #

1. WebMvcConfigurerAdapter已过时：这个类在Spring Boot 2.0+就被标记为过时，直接实现WebMvcConfigurer接口才能保证配置正常生效，继承过时类可能导致CORS规则不被加载。
2. Spring Security的CORS配置未关联自定义规则：你只调用了http.cors()但未指定自定义的CorsConfigurationSource，此时Spring Security会使用默认的CORS配置，而非你在SimpleCorsConfiguration中定义的规则，导致跨域限制依然生效。
3. 潜在的规则冲突：同时使用@CrossOrigin注解和全局CORS配置可能引发规则优先级问题，建议统一使用全局配置，避免混合配置导致的不可预期结果。

修正后的正确配置 #

方式一：统一在Spring Security中配置CORS #

直接在安全配置中定义完整的CORS规则，确保请求被Security过滤器处理时就应用跨域允许规则：

@Configuration
@EnableWebSecurity
class WebSecurityConfig : WebSecurityConfigurerAdapter() {

    @Throws(Exception::class)
    override fun configure(http: HttpSecurity) {
        http
            .cors().configurationSource(corsConfigurationSource())
            .and()
            .csrf().disable() // 若无需CSRF保护可禁用，生产环境按需配置
            .authorizeRequests()
            .anyRequest().permitAll() // 根据实际权限需求调整
    }

    private fun corsConfigurationSource(): CorsConfigurationSource {
        val corsConfig = CorsConfiguration()
        // 生产环境建议替换为具体前端域名，如"https://frontend.eu.ngrok.io"
        corsConfig.allowedOrigins = listOf("*")
        corsConfig.allowedMethods = listOf("GET", "POST", "PUT", "DELETE", "OPTIONS")
        corsConfig.allowedHeaders = listOf("*")
        corsConfig.exposedHeaders = listOf("*")
        corsConfig.maxAge = 3600L

        val source = UrlBasedCorsConfigurationSource()
        source.registerCorsConfiguration("/**", corsConfig)
        return source
    }
}

方式二：更新全局WebMvc CORS配置（配合Security） #

如果偏好通过WebMvc配置全局规则，需替换过时的继承方式，并确保Security启用CORS：

@Configuration
class SimpleCorsConfiguration : WebMvcConfigurer {
    override fun addCorsMappings(registry: CorsRegistry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .allowedHeaders("*")
            .exposedHeaders("*")
            .maxAge(3600)
    }
}

@Configuration
@EnableWebSecurity
class WebSecurityConfig : WebSecurityConfigurerAdapter() {
    @Throws(Exception::class)
    override fun configure(http: HttpSecurity) {
        http
            .cors() // 自动使用WebMvc的CORS配置
            .and()
            .csrf().disable()
            .authorizeRequests()
            .anyRequest().permitAll()
    }
}

现代前后端跨域通信的常见方案 #

1. 后端CORS配置：如上述方式，是开发阶段最直接的方案，需注意生产环境不要使用*通配符，应指定具体的前端域名，避免安全风险。
2. 反向代理（生产环境首选）：通过Nginx、Apache等工具将前端和后端请求代理到同一域名下，例如前端请求/api/helloworld时，反向代理到后端地址，彻底消除跨域问题。
3. 开发环境代理：React项目可在package.json中添加"proxy": "https://backend.ru.ngrok.io"，前端发起相对路径请求时会自动代理到后端，绕过浏览器跨域限制。
4. 带凭证的跨域：若需传递Cookie等凭证，需设置allowCredentials(true)，同时allowedOrigins必须指定具体域名（不能用*），前端axios需开启withCredentials: true。

验证配置是否生效 #

打开浏览器开发者工具，查看请求的响应头：

• 确认存在Access-Control-Allow-Origin头，值为你的前端域名或*
• 预检OPTIONS请求能正常返回200状态码

内容的提问来源于stack exchange，提问作者Martin Nöbel