Laravel中解决Stripe会话跳转CORS错误：如何返回URL给前端跳转

1. 修改控制器方法，返回JSON格式的会话URL #

不再直接使用return redirect($session->url);，而是将Stripe会话URL封装成JSON响应返回给前端：

public function createCheckoutSession()
{
    // 初始化Stripe会话（根据你的业务逻辑调整参数）
    $session = \Stripe\Checkout\Session::create([
        'payment_method_types' => ['card'],
        'line_items' => [
            [
                'price_data' => [
                    'currency' => 'cn_yuan',
                    'product_data' => [
                        'name' => '定制商品',
                    ],
                    'unit_amount' => 9900, // 单位为分，对应99元
                ],
                'quantity' => 1,
            ],
        ],
        'mode' => 'payment',
        'success_url' => route('payment.success'),
        'cancel_url' => route('payment.cancel'),
    ]);

    // 返回会话URL给前端
    return response()->json(['checkout_url' => $session->url]);
}

2. 前端接收URL并完成跳转 #

通过AJAX请求调用上述控制器接口，拿到返回的URL后，用浏览器原生的页面跳转方式跳转到Stripe Checkout页面。以下是不同场景的示例：

原生JavaScript示例

document.getElementById('pay-btn').addEventListener('click', async () => {
    try {
        const response = await fetch('/api/checkout/create', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        const result = await response.json();
        // 前端主动跳转至Stripe页面
        window.location.href = result.checkout_url;
    } catch (error) {
        console.error('创建支付会话失败:', error);
    }
});

Vue.js示例

methods: {
    async startCheckout() {
        try {
            const { data } = await this.$axios.post('/api/checkout/create');
            window.location.href = data.checkout_url;
        } catch (err) {
            alert('支付会话创建失败，请稍后重试');
        }
    }
}

原理说明 #

服务器端直接返回redirect()会触发浏览器的跨域校验（Stripe域名与你的站点域名不同），导致CORS错误；而由前端主动发起页面跳转，属于浏览器的正常导航行为，不会触发CORS限制，因此可以正常访问Stripe Checkout页面。

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