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

Posted 2023-03-21

【中文标题】如何使用 Livewire Stripe Prebuilt Checkout 修复 CORS 错误 [重复]

【英文标题】：How to fix CORS Error using Livewire Stripe Prebuilt Checkout [duplicate]

【发布时间】：2022-01-18 04:56:48

【问题描述】：

我在 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/*',
    ];

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

【参考方案1】：

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

有关此示例，请参阅上一个答案：https://***.com/a/68630525

【讨论】：

如果您知道某个问题是重复的，请将其标记为关闭而不是回答。

不错的电话。我对此进行了辩论，但不确定通过“livewire”处理获取的相似/不同/复杂性，因为我不熟悉它。