Node.js+React实现Stripe Checkout会话触发CORS错误如何解决

你遇到的CORS报错和后端配置的CORS规则无关，问题源于：前端通过Axios发送AJAX请求时，后端返回303重定向到Stripe的结账域名，浏览器会自动让AJAX请求跟随跳转，而Stripe的官方域名没有配置允许http://localhost:3000跨域访问的响应头，因此触发拦截。

1. 调整后端接口逻辑 #

移除重定向逻辑，直接将生成的Stripe结账会话URL返回给前端即可：

const YOUR_DOMAIN = 'http://localhost:5000';

router.post('/account/subscriptioncheckoutsession', async (req, res) => {
  const session = await Stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'Product Subsciption',
            images: ['https://i.imgur.com/EHyR2nP.png'],
          },
          unit_amount: 100,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: `${YOUR_DOMAIN}/success.html`,
    cancel_url: `${YOUR_DOMAIN}/cancel.html`,
  });
  // 替换原res.redirect逻辑
  res.json({ checkoutUrl: session.url })
})

2. 调整前端调用逻辑 #

拿到后端返回的结账地址后，用页面全局跳转的方式访问Stripe结账页，不要走AJAX跳转：

const handleCheckout = async (e) => {
  e.preventDefault()
  const { data } = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/account/subscriptioncheckoutsession')
  // 全局跳转至Stripe结账页
  window.location.href = data.checkoutUrl
}

如果你的项目是React单页应用，建议将YOUR_DOMAIN改为前端地址http://localhost:3000，匹配前端路由的成功/取消页，避免跳转后脱离前端应用。

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