本文旨在解决Spring Boot应用集成Spring Security后，前端React应用调用Stripe支付接口时遇到的CORS错误问题。通过分析配置、代码示例和错误信息，提供详细的解决方案，帮助开发者正确配置CORS，允许跨域请求，确保Stripe支付功能正常运行。本文重点在于理解CORS配置的关键点，以及如何在Spring Security中正确应用CORS策略。
CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种浏览器安全机制，用于限制网页从不同源（域、协议或端口）请求资源。当Spring Security配置不当，或者CORS配置缺失时，可能会导致跨域请求被阻止，出现类似“Cross-Origin Request Blocked”的错误。本文将针对Spring Boot应用集成Stripe支付时遇到的CORS问题，提供详细的排查和解决方案。
理解CORS配置
CORS的配置主要涉及到服务器端（Spring Boot）的响应头设置，允许特定的源进行跨域请求。常见的CORS配置包括：
- Access-Control-Allow-Origin: 指定允许访问资源的域。可以使用具体的域名，也可以使用*表示允许所有域。*生产环境中不建议使用``，因为它存在安全风险。**
- Access-Control-Allow-Methods: 指定允许的HTTP方法，如GET、POST、PUT、DELETE等。
- Access-Control-Allow-Headers: 指定允许的请求头。
- Access-Control-Allow-Credentials: 指定是否允许发送cookie。
Spring Boot中的CORS配置方式
Spring Boot提供了多种方式来配置CORS，包括：
- @CrossOrigin注解: 可以直接在Controller的方法或类上使用@CrossOrigin注解，配置CORS策略。
- WebMvcConfigurer接口: 通过实现WebMvcConfigurer接口，重写addCorsMappings方法，进行全局CORS配置。
- CorsFilter: 创建一个CorsFilter，并将其注册到Spring容器中。
解决Stripe请求CORS问题的步骤
-
确认CORS配置生效:
首先，确保你的CORS配置已经生效。检查CorsConfiguration.java中的配置是否正确加载。如果使用了@CrossOrigin注解，确保注解的位置正确。
@Configuration public class CorsConfiguration { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedMethods("HEAD", "GET", "PUT", "POST", "DELETE", "PATCH","OPTIONS") .allowedOrigins("https://m.stripe.com/6","https://r.stripe.com/0","http://localhost:3000") .exposedHeaders("*") .allowedHeaders("*") .allowCredentials(true); // 允许发送cookie } }; } }注意: allowCredentials(true) 需要与前端的 withCredentials: true 相对应，否则CORS请求会被拒绝。
-
检查Spring Security配置:
Spring Security的配置可能会覆盖或影响CORS配置。确保在Spring Security的配置中允许CORS请求。
@Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.cors().and().csrf().disable() .authorizeRequests() .antMatchers("/api/clients/authentication/**", "/api/repas/**").permitAll() .anyRequest().authenticated() .and() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS); http.addFilterBefore(jwtFilter, UsernamePasswordAuthenticationFilter.class); } @Bean CorsConfigurationSource corsConfigurationSource() { CorsConfiguration configuration = new CorsConfiguration(); configuration.setAllowedOrigins(Arrays.asList("http://localhost:3000", "https://m.stripe.com/6","https://r.stripe.com/0")); // 允许的源 configuration.setAllowedMethods(Arrays.asList("GET","POST", "PUT", "DELETE", "OPTIONS")); // 允许的方法 configuration.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type")); // 允许的头 configuration.setAllowCredentials(true); // 允许发送cookie UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); return source; } }关键点:
- 使用http.cors()启用CORS支持。
- 创建一个CorsConfigurationSource Bean，配置允许的源、方法和头。
- 将CorsConfigurationSource注册到UrlBasedCorsConfigurationSource中，并指定拦截的路径。
-
前端代码检查:
前端代码也需要进行相应的配置，确保跨域请求能够正确发送。
-
axios配置:
import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:8080', // 你的API地址 withCredentials: true, // 允许发送cookie headers: { 'Content-Type': 'application/json', } }); export default instance;注意: withCredentials: true 必须与后端 allowCredentials(true) 相对应。
-
Stripe请求:
确保Stripe请求的发送方式正确。通常，Stripe的SDK会处理CORS问题，但如果手动发送请求，需要确保配置正确。
-
忽略 r.stripe.com 错误
根据Stripe官方的说法，r.stripe.com 域名主要用于追踪指标，与支付功能本身无关。因此，如果仅仅是 r.stripe.com 出现 CORS 错误，可以忽略它，不会影响支付流程。
总结
解决Spring Security阻止Stripe请求导致的CORS问题，需要从服务器端和客户端两个方面入手。
- 服务器端: 正确配置CORS，允许前端应用的源进行跨域请求。确保Spring Security的配置不会覆盖CORS配置。
- 客户端: 使用正确的请求方式，配置withCredentials，并处理CORS相关的错误。
通过以上步骤，可以解决大部分Stripe请求的CORS问题，确保支付功能正常运行。如果问题仍然存在，需要进一步检查网络配置和浏览器设置，确保没有其他因素干扰跨域请求。
