解决Spring Security阻止Stripe请求导致的CORS问题

霞舞

发布时间：2025-10-17 09:13:01

962人浏览过

来源于php中文网

原创

解决spring security阻止stripe请求导致的cors问题

本文旨在解决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中，并指定拦截的路径。

前端代码检查:

墨狐AI
5分钟生成万字小说，人人都是小说家！

下载

前端代码也需要进行相应的配置，确保跨域请求能够正确发送。
- 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 错误