Stripe Checkout 示例从 localhost 遇到 CORS 错误

Posted 2023-03-04

【中文标题】Stripe Checkout 示例从 localhost 遇到 CORS 错误

【英文标题】：Stripe Checkout example running into CORS error from localhost

【发布时间】：2022-01-02 11:19:38

【问题描述】：

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

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

我在前端使用 React，在后端使用 Express。我已启用 cors。

从 React 到后端的请求成功，一个预检请求开始进行条带化。来自条带的预检响应是 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'
      
    )
  

【问题讨论】：

这里您使用fetech 执行Ajax POST 调用。在 post 请求中，res.redirect 将不起作用。相反，您有两个选择： 选项 1：在您的 /create-checkout-session 中返回 JSON，并在获取结果后，在前端进行重定向。选项 2：执行 form submit POST 而不是使用 fetch

谢谢。最终选择了选项 1，它奏效了！

【参考方案1】：

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

Stripe checkout 使用 AWS Cloudfront，它不允许选项请求（根据 Stripe 的配置） 当我将前端的请求类型更改为text/plain 时，OPTIONS 请求不会发送到 Stripe。 （是的，没错，在我的服务器返回 303 和 Stripe 的 url 后，Chrome 不会向 Stripe 发送 OPTIONS 请求） 使用 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