如何使用 Livewire Stripe Prebuilt Checkout 修复 CORS 错误

Question

我在 Livewire 组件中使用了一个简单的 Stripe Prebuilt Checkout (HTML/PHP)。

它在本地运行良好，但在生产环境中运行不佳。

当我查看网络时，我看到 Status: CORS Error 然后是 Status: 403 error。

见图：

这是我的代码：

组件：

<form wire:submit.prevent="checkout">
    <x-assets.checkout-button type="submit" id="checkout-button">
        Buy Now
    </x-assets.checkout-button>
</form>
@push('stripe')
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.stripe.com/v3/"></script>
@endpush

然后在服务器端：

    public function checkout()
    {
        \Stripe\Stripe::setApiKey(config('services.stripe.secret'));

        header('Content-Type: application/json');

        $YOUR_DOMAIN      = config('app.url');
        $checkout_session = \Stripe\Checkout\Session::create([
            'billing_address_collection'  => 'required',
            'shipping_address_collection' => [
                'allowed_countries' => ['US'],
            ],
            'line_items' => [[
                // Provide the exact Price ID (e.g. pr_1234) of the product you want to sell
                'price'    => $this->product->stripe_plan,
                'quantity' => 1,
            ]],
            'mode' => 'payment',
            'allow_promotion_codes' => true,
            'success_url'   => url($YOUR_DOMAIN . '/product/thank-you'),
            'cancel_url'    => $YOUR_DOMAIN . '/product',
            'automatic_tax' => [
                'enabled' => false,
            ],
        ]);

        header('HTTP/1.1 303 See Other');
        header('Location: ' . $checkout_session->url);

        return redirect($checkout_session->url);
    }

这些是我要遵循的方向：https://stripe.com/docs/checkout/quickstart

我有一个表单元素，但我没有使用 @CSRF 因为我使用的是 Livewire。

在我的 VerifyCsrfToken.php 文件中，我有 Livewire 的以下内容：

    protected $except = [
        'stripe/webhook',
        'shippo/webhook',
        'discord/webhook',
        'livewire/*',
    ];

与服务器端代码中的Headers有关吗？ header('Content-Type: application/json');

Answer 1

您不能向 fetch / XMLHttpRequest 发送重定向响应。您需要更改客户端请求模式（例如，表单提交），或者将会话 url 作为数据发送回客户端并改为重定向客户端。

有关此示例，请参阅之前的回答：

如何使用 Livewire Stripe Prebuilt Checkout 修复 CORS 错误

How to fix CORS Error using Livewire Stripe Prebuilt Checkout

php

laravel

stripe-payments

laravel-livewire