Stripe支付JS代码报405错误及LinkAuthentication初始化失败求助

问题现象 #

迁移Stripe支付代码到个人Spring Boot项目后，浏览器控制台出现两个关联错误：

• POST请求http://localhost:8080/create-payment-intent返回405（Method Not Allowed）
• 创建linkAuthentication元素时提示必须传入clientSecret或mode

原项目可正常运行，怀疑Spring Security是主要诱因。

一、405 Method Not Allowed 错误修复 #

1. Spring Security权限拦截 #

个人项目启用了Spring Security，但未对支付相关端点开放POST权限。需在Security配置类中添加放行规则：

Spring Security 5.7+ Lambda风格配置：

@Configuration
public class SecurityConfig {
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.authorizeHttpRequests(auth -> auth
                // 放行支付接口的POST请求
                .requestMatchers(HttpMethod.POST, "/create-payment-intent").permitAll()
                // 放行支付页面及静态资源
                .requestMatchers("/checkout", "/checkout.css", "/checkout.js").permitAll()
                .anyRequest().authenticated()
        );
        return http.build();
    }
}

旧版本WebSecurityConfigurerAdapter配置：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .antMatchers(HttpMethod.POST, "/create-payment-intent").permitAll()
                .antMatchers("/checkout", "/checkout.css", "/checkout.js").permitAll()
                .anyRequest().authenticated();
    }
}

2. 跨域配置（若存在跨域场景） #

如果前端请求存在域名/端口差异，需添加CORS配置允许跨域请求：

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOriginPattern("*"); // 生产环境替换为具体业务域名
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

3. 端点映射冲突检查 #

确认项目中没有其他Controller映射了/create-payment-intent路径，避免请求被错误路由。

二、linkAuthentication元素参数缺失错误修复 #

这个错误是405错误的连锁反应：因为/create-payment-intent请求失败，前端无法获取有效clientSecret，导致初始化Stripe Elements时参数缺失。解决完405问题后，该错误会自动消失，建议添加以下防御性代码：

在initialize函数中增加错误捕获与处理：

async function initialize() {
    try {
        const response = await fetch("/create-payment-intent", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(request),
        });

        if (!response.ok) {
            throw new Error(`请求支付接口失败: ${response.status} ${response.statusText}`);
        }

        const { intentID, clientSecret } = await response.json();

        if (!clientSecret) {
            throw new Error("未获取到有效的Stripe clientSecret");
        }

        paymentIntentID = intentID;

        const appearance = {
            theme: 'stripe',
        };
        elements = stripe.elements({ appearance, clientSecret });

        // 后续元素创建逻辑...
    } catch (error) {
        showMessage(`支付初始化失败: ${error.message}`);
        console.error(error);
    }
}

同时验证后端Response类的字段名与前端解构是否完全匹配：确保intentID和clientSecret的大小写、名称一致，避免JSON序列化/反序列化时丢失数据。

额外验证点 #

1. 检查Stripe密钥配置：确认application.properties/application.yml中的stripe.api.secretKey和stripe.api.publicKey配置正确，后端已完成Stripe客户端初始化。
2. 验证PaymentInfo类：确保字段名与前端请求参数匹配，且有对应的getter/setter或使用Lombok的@Data注解，保证参数能正确接收。

内容的提问来源于stack exchange，提问作者Dawid Żeleźniak