Next.js + Paddle：checkout.open 时发生 CORS 错误

Question

问题

我有一个 Next.js 13.4.1 应用程序，我在其中实现 Paddle.js 作为支付解决方案。

当尝试打开结帐时，我收到带有以下 CORS 错误的 404 响应：

访问 XMLHttpRequest 'https://sandbox-create-checkout.paddle.com/v2/checkout/product/undefined/?parentURL=http%3A%2F%2Flocalhost%3A4200%2Fbilling&parent_url=http%3A%2F %2Flocalhost%3A4200%2Fbilling&referring_domain=localhost%3A4200%20%2F%20localhost%3A4200&display_mode=overlay&apple_pay_enabled=false&paddlejs-version=2.0.72&vendor=14017&checkout_initied=1692529930415&popup=true&paddle_js=true&is_pop up=true' from origin 'https://sandbox- buy.paddle.com' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我再次浏览了整个文档，但没有发现任何相关内容：

• 桨设置清单
• paddle 构建覆盖结帐
• paddle.js
• 关于如何创建提供程序的博客文章

我不知道该怎么办。我需要配置 next.js 来向我的请求添加一些标头吗？

这可能吗，因为我正在导入进行调用的脚本？

代码

桨供应商：

'use client'

import { createContext, useState } from 'react'
import Script from 'next/script'
import { getNodeEnv } from '@/utils/getNodeEnv'
import { vendor_id } from '@/helpers/APIs/paddle/config'

type PaddleContext = any

const PaddleContext = createContext<PaddleContext>(null)

type Props = {
  children: React.ReactNode
}

const PaddleProvider: React.FC<Props> = ({ children }) => {
  
  const [paddle, setPaddle] = useState<any>(null)

  return (
    <PaddleContext.Provider value={paddle}>
      <Script
        src="https://cdn.paddle.com/paddle/paddle.js"
        onLoad={() => {
          if (getNodeEnv() !== 'prod') Paddle.Environment.set("sandbox")
          Paddle.Setup({
            vendor: Number(vendor_id),
          })
          setPaddle(Paddle)
        }}
      />
      { children }
    </PaddleContext.Provider>
  )
}

export { PaddleProvider, PaddleContext }

使用提供程序打开覆盖结账的组件：

const OfferOption: React.FC<Props> = ({ offer }) => {

  const paddle = usePaddleContext()

  const openCheckout = (price_id: string) => {
    paddle.Checkout.open({
      settings: {
        theme: 'dark'
      },
      items: [
        {
          price_id,
          quantity: 1
        }
      ]
    })
  }

  return (
    <button
      type='button'
      onClick={() => openCheckout(offer.price_id)}
...

Paddle 全局解决打字稿问题：

declare global {
  const Paddle: any
}

export {}

Answer 1

将 localhost 更改为其他名称，例如 app.localtest.me（如果你有 vite）