Laravel10+Vue3集成Stripe时CSRF令牌获取及CORS问题排查

核心原因 #

你遇到的CORS错误根源是错误用Axios请求Stripe Checkout链接：

• Stripe Checkout页面是专为用户跳转设计的支付页，不支持AJAX（Axios属于AJAX）方式发起请求，Stripe服务器不会给这类请求返回Access-Control-Allow-Origin头，浏览器自然会拦截并抛出跨域错误。
• 你当前的代码逻辑是用Axios发送/checkout请求，若后端返回的是Stripe的Checkout URL，你没有做跳转操作，反而让Axios尝试去请求这个外部URL，这才是触发错误的关键。

具体修正步骤 #

1. 调整后端/checkout接口：确保接口返回Stripe生成的Checkout会话URL（比如返回格式为['url' => $checkoutSession->url]）。
2. 修改前端savePaymentMethod函数，拿到URL后直接跳转，不要让Axios去请求该链接：

const savePaymentMethod = async () => {
    localStorage.setItem('paymentMethod', paymentForm.value.payment_method);
    
    try {
         await getToken(); 
         const response = await axios.post('/checkout');
         // 直接跳转到Stripe支付页面
         window.location.href = response.data.url;
    } catch (error) {
        console.error("Error with sending payment:", error);
    }
};

额外排查点 #

• 确认Laravel的CORS配置：在config/cors.php中，确保paths包含/checkout，allowed_origins设置正确的前端域名，allowed_methods包含POST。
• 检查Stripe会话创建逻辑：后端生成Stripe Checkout会话时，要正确设置success_url和cancel_url，这两个URL必须是你的前端域名，不能存在跨域问题。

内容的提问来源于stack exchange，提问作者Wormsonn