Stripe Checkout 示例从本地主机遇到 CORS 错误

Question

我正在尝试使用此处给出的说明集成 Stripe Checkout https://stripe.com/docs/ payments/accept-a- payment?integration=checkout 对于节点。

我已按照他们的说明进行操作，并使用我帐户中的实际（测试）密钥更新了示例中的 API 密钥。

我在前端使用React，在后端使用express。我已经启用了cors。

React 向后端请求成功，并向 stripe 发起预检请求。来自 stripe 的预检响应是 403，实际请求因 CORS 错误而被阻止 -

PreflightMissingAllowOriginHeader

后端代码（最少）

const express = require("express");
const app = express();
const cors = require("cors");

const stripe = require("stripe")(
  process.env.STRIPE_SECRET_KEY
);

app.use(
  cors({
    origin: ["http://localhost:8000", "https://checkout.stripe.com"],
  })
);

app.post("/create-checkout-session", async (req, res) => {
  console.log('getting here 1')
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [
      {
        price_data: {
          currency: "usd",
          product_data: {
            name: "T-shirt",
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
    success_url: "http://localhost:4242/success.html",
    cancel_url: "http://localhost:4242/cancel.html",
  });
  
  console.log('getting here 2')
  res.redirect(303, session.url);
});

app.listen(4242, () => console.log(`Listening on port ${4242}!`));

前端代码

  handleClick = () => {
    const res = fetch(`${process.env.BACKEND_API_URL}/create-checkout-session`, {
      method: 'POST',
      headers: {
        "Content-Type": 'text/html'
      }
    })
  }

Answer 1

以下是我在尝试调试时学到的一些东西。

1. Stripe 结帐使用 AWS Cloudfront，它不允许选项请求（根据 Stripe 的配置）
当我将前端的请求类型更改为
2. text/plain

    时，

   OPTIONS 请求不会发送到 Stripe。 （是的，没错，我的服务器返回带 Stripe 的 url 的 303 后，Chrome 不会向 Stripe 发送 OPTIONS 请求）
3. 使用 React 时最好避免重定向

这里分别是更新后的后端和前端代码，解决了问题

app.post("/create-checkout-session", async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [
      {
        price_data: {
          currency: "usd",
          product_data: {
            name: "T-shirt",
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: "payment",
    success_url: "http://localhost:8000/success",
    cancel_url: "http://localhost:8000/cancel",
  });

  res.json({url: session.url}) // <-- this is the changed line
});

  handleClick = async () => {
    const res = await fetch(`${process.env.BACKEND_API_URL}/create-checkout-session`, {
      method: 'POST',
      headers: {
        "Content-Type": 'application/json'
      }
    })
    const body = await res.json()
    window.location.href = body.url
  }

Answer 2

在创建结帐会话之前，我在服务器端端点添加了 CORS 处理：

export default async (req: Request, res: Response) => {
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', '*');
  res.setHeader('Access-Control-Allow-Methods', '*');

  if(req.method === 'OPTIONS') {
    return res.status(204).send();
  }

  //...

  res.json({clientSecret, sessionId, url});
}