Question

我正在尝试使用 NodeJs 和 React 实现条带结帐，但似乎从控制台日志中收到此错误：

Access to XMLHttpRequest at 'https://checkout.stripe.com/pay/cs_test_a1y3gwvPAqpqhArQ9B83g3Du9EvF87HVcxzcx5Opt6o1rKinGEQViuXIq' (redirected from 'http://localhost:5000/api/account/subscriptioncheckoutsession') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我目前所做的：

环境文件

REACT_APP_FETCH_URL=http://localhost:5000

server.js

var whitelist = ['http://localhost:3000', 'http://localhost:5000'];
app.use(cors({ credentials: true, origin: whitelist }));

路由接口

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(303, session.url)
})

客户

const handleCheckout = async (e) => {
        e.preventDefault()
        const response = await Axios.post(process.env.REACT_APP_FETCH_URL + '/api/account/subscriptioncheckoutsession')
    }


<div className="form-group">
  <button type="submit" className="btn btn-primary" onClick={handleCheckout}>
   Subscribe or Renew Subscription</button>
</div>

我错过了什么？非常感谢，并非常感谢任何帮助。再次感谢。

Answer 1

如果您使用 XMLHTTPRequest（例如，Axios.post）来获取 CheckoutSession 的 URL，则无法以这种方式直接从服务器重定向！该方法仅在您执行 Stripe 文档中描述的操作时才有效 - 从 action 的 <form> 调用后端 /subscriptioncheckoutsession 路由：https://stripe.com/docs/billing/subscriptions/checkout#create-session

因此，您可以更改代码，使表单操作成为该路由，并完全摆脱 onClick 函数和 Axios 的使用！

如果你不想使用表单提交，而是想使用像 Axios 这样的 Ajax 方法，我建议你的后端应该只返回 URL 作为响应正文的一部分（例如 {{1 }} 而不是 res.json({"url":session.url};) 并通过设置 res.redirect（例如 window.location）

在 JavaScript 中执行重定向

条纹结帐会话不工作 nodejs

1 个答案: