在现代web应用开发中，前后端分离架构日益普及。当后端（如spring boot）和前端（如react）部署在不同的域或端口时，浏览器出于安全考虑会实施同源策略，从而引发跨域资源共享（cors）错误。即使服务器端配置了看似允许所有来源、所有方法和所有头的cors策略，开发者仍可能遇到类似get http://your-ec2-ip:8080/api/... net::err_failed 200的错误。这个错误信息尤其令人困惑，因为它显示请求成功到达服务器并返回了200 ok状态码，但浏览器最终阻止了响应数据的加载。
开发者通常会尝试以下方法来解决CORS问题：
客户端代理配置： 在开发环境中，使用http-proxy-middleware等工具将前端请求代理到后端，但这仅限于开发阶段，部署后无效。
客户端axios配置： 设置baseURL、添加{withCredentials: true}到请求头，或者使用axios实例。
-
服务器端CorsConfigurationSource Bean： 在Spring Boot应用中，通过定义CorsConfigurationSource类型的@Bean来配置CORS策略，例如：
@Bean CorsConfigurationSource corsConfigurationSource() { CorsConfiguration configuration = new CorsConfiguration(); configuration.setAllowedOrigins(Arrays.asList("*")); // 允许所有来源 configuration.setAllowedMethods(Arrays.asList("GET","POST", "PATCH", "DELETE")); // 允许所有方法 configuration.setAllowedHeaders(Arrays.asList("*")); // 允许所有头 configuration.setAllowCredentials(true); // 允许发送凭证 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); return source; }尽管上述代码看起来已经非常宽松，但在许多情况下，尤其当项目中引入了Spring Security时，这种独立的CorsConfigurationSource Bean可能不会被Spring Security的过滤器链正确识别或优先处理，导致CORS问题依然存在。
当Spring Security被引入项目时，它会接管HTTP请求的安全管理，包括CORS处理。因此，最可靠的CORS配置方法是将其直接整合到Spring Security的配置中。
核心思想： 在Spring Security的WebSecurityConfig中，通过HttpSecurity对象显式地配置CORS策略。
以下是解决此类CORS问题的推荐Spring Security配置示例：
import org.springframework.context.annotation.Bean;
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;
import java.util.Collections; // 导入Collections
@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
// 创建一个CorsConfiguration实例
CorsConfiguration corsConfiguration = new CorsConfiguration();
// **重要：如果客户端使用withCredentials，AllowedOrigins不能为"*"。**
// 建议明确列出允许的来源。例如：
// corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:3000", "http://pre-project-038-client.s3-website.ap-northeast-2.amazonaws.com"));
// 如果不使用withCredentials，或者确定不会有凭证，可以允许所有来源
corsConfiguration.setAllowedOrigins(Collections.singletonList("*")); // 或者明确列出
corsConfiguration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH")); // 允许所有常用HTTP方法
corsConfiguration.setAllowedHeaders(Collections.singletonList("*")); // 允许所有请求头
corsConfiguration.setAllowCredentials(true); // 允许发送Cookie等凭证信息
// 将CORS配置源注册到URL路径
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", corsConfiguration); // 对所有路径应用CORS配置
httpSecurity
// 启用CORS并使用上面定义的配置源
.cors().configurationSource(request -> corsConfiguration)
.and()
// 禁用CSRF防护，对于无状态的RESTful API通常需要禁用
.csrf().disable()
// 配置授权规则
.authorizeRequests()
.antMatchers("/**").permitAll() // 允许所有请求访问所有路径
.anyRequest().permitAll(); // 兜底规则，允许所有其他请求
// .anyRequest().authenticated(); // 如果需要认证，则改为此行
}
} 代码解析：
- @Configuration和@EnableWebSecurity： 标记这是一个Spring配置类，并启用Spring Security的Web安全功能。
- WebSecurityConfigurerAdapter： 提供一个方便的基类来扩展WebSecurity配置。
- configure(HttpSecurity httpSecurity)： 这是配置HTTP安全性的核心方法。
- CorsConfiguration corsConfiguration = new CorsConfiguration();： 创建CORS配置对象。
- corsConfiguration.setAllowedOrigins(...)： 设置允许的来源。关键点： 如果客户端使用了withCredentials: true（如axios配置），那么AllowedOrigins不能设置为*。它必须是客户端请求的精确来源（例如http://your-s3-website-url.com）。否则，浏览器会拒绝带有凭证的跨域请求。如果不需要凭证，可以设置为*。
- corsConfiguration.setAllowedMethods(...)： 设置允许的HTTP方法，包括OPTIONS，因为浏览器在发送实际请求前会先发送一个OPTIONS预检请求。
- corsConfiguration.setAllowedHeaders(...)： 设置允许的请求头。通常设置为*以允许所有头。
- corsConfiguration.setAllowCredentials(true)： 告知浏览器允许发送Cookie、HTTP认证信息等凭证。再次强调： 如果设置为true，AllowedOrigins就不能是*。
- httpSecurity.cors().configurationSource(request -> corsConfiguration)： 这是将自定义CORS配置集成到Spring Security的关键步骤。它告诉Spring Security使用我们定义的CorsConfiguration来处理CORS请求。
- csrf().disable()： 对于无状态的RESTful API，通常会禁用CSRF（跨站请求伪造）防护，因为它依赖于会话和Cookie，而RESTful API通常使用Token进行认证。禁用CSRF可能带来安全风险，请根据实际情况评估。
- `authorizeRequests().antMatchers("/").permitAll().anyRequest().permitAll()：** 这部分配置了请求的授权规则。permitAll()`表示允许所有请求访问，这在开发和调试阶段非常有用。在生产环境中，您应该根据实际需求配置更细粒度的访问控制。
- withCredentials与AllowedOrigins： 这是最常见的CORS陷阱之一。当客户端（如React应用）使用axios并设置{withCredentials: true}时，服务器响应的Access-Control-Allow-Origin头就不能是*。服务器必须返回与客户端请求的Origin头完全匹配的值。如果您的前端部署在http://pre-project-038-client.s3-website.ap-northeast-2.amazonaws.com，那么setAllowedOrigins应该包含这个具体的URL。
-
生产环境安全：
- 限制AllowedOrigins： 在生产环境中，强烈建议将setAllowedOrigins设置为您的前端应用部署的精确URL，而不是*，以减少潜在的安全风险。
- 限制AllowedMethods和AllowedHeaders： 仅允许您的应用实际需要的方法和头。
- CSRF防护： 如果您的应用是基于会话的，或者有其他原因需要CSRF防护，请不要禁用它，并确保正确配置。
- 预检请求（Preflight Requests）： 浏览器在发送某些复杂的跨域请求（如PUT、DELETE、自定义头等）之前，会先发送一个OPTIONS方法类型的预检请求。上述Spring Security配置会自动处理这些预检请求，确保它们得到正确的CORS头响应。
- 部署环境差异： 确保您的EC2服务器的安全组（Security Group）允许来自S3前端的HTTP/HTTPS流量，并且端口（如8080）是开放的。
- 日志分析： 如果CORS问题依然存在，请检查浏览器开发工具中的网络请求，查看请求头和响应头，特别是Origin、Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers和Access-Control-Allow-Credentials等CORS相关字段，以定位具体问题。
在Spring Boot应用中处理CORS问题，尤其当Spring Security活跃时，最佳实践是将CORS配置直接嵌入到WebSecurityConfig中。通过httpSecurity.cors().configurationSource(...)，您可以确保Spring Security的过滤器链正确应用您的CORS策略。同时，务必注意withCredentials与AllowedOrigins之间的严格匹配要求，这是许多开发者容易忽视的关键细节。遵循这些指南，您将能够有效地解决跨域问题，确保前后端应用在部署后正常通信。
以上就是解决Spring Boot与React应用在AWS部署中CORS错误的终极指南的详细内容，更多请关注知识资源分享宝库其它相关文章！
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。