React与Express集成Stripe支付时跨域请求被阻止问题排查

看起来你遇到的CORS问题根源有两个：后端没有启用CORS中间件，同时前端请求里错误地添加了属于响应头的CORS字段。另外你的fetch请求处理还有个小细节错误，我一步步帮你解决：

1. 修复后端Express的CORS配置 #

你已经引入了cors包但注释掉了使用代码，这是触发CORS错误的核心原因。CORS规则是由后端来配置并返回给浏览器的，必须在路由之前启用CORS中间件：

首先确保你已经安装了cors依赖：

npm install cors

然后修改你的Express路由文件：

const express = require("express");
const Stripe = require("stripe");
const cors = require("cors"); // 取消注释cors引入
require("dotenv").config();
const stripe = Stripe(process.env.STRIPE_KEY);
const router = express.Router();

// 开发环境可以用通配符，生产环境请替换成你的正式前端域名
router.use(cors({ 
  origin: process.env.CLIENT_URL, // 用环境变量指定前端地址，更安全
  credentials: true 
}));

router.post("/create-checkout-session", async (req, res) => {
  try { // 添加错误捕获，避免服务器因Stripe调用失败崩溃
    const session = await stripe.checkout.sessions.create({
      line_items: [
        {
          price_data: {
            currency: "usd",
            product_data: {
              name: "T-shirt",
            },
            unit_amount: 2000,
          },
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url: `${process.env.CLIENT_URL}/checkout-success`,
      cancel_url: `${process.env.CLIENT_URL}/cart`,
    });
    res.send({ url: session.url });
  } catch (err) {
    res.status(500).send({ error: err.message });
  }
});

module.exports = router;

2. 清理前端请求中的无效CORS头 #

你在fetch请求里添加的Access-Control-Allow-Origin和Access-Control-Allow-Methods是后端返回给浏览器的响应头，不是前端需要发送的请求头。前端发送这些头不仅无效，还可能干扰浏览器的CORS检查逻辑，必须删掉：

修改后的Fetch版本代码： #

const PayButton = ({ cartItems }) => {
  const user = useSelector((state) => state.auth);
  const handleCheckOut = () => {
    fetch(`${url}/stripe/create-checkout-session`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json", // 只保留这个必要的请求头
      },
      body: JSON.stringify({ cartItems, userId: user._id }),
    })
    .then((res) => {
      if (!res.ok) { // 先检查响应状态是否正常，fetch不会自动抛出HTTP错误
        throw new Error(`HTTP error! Status: ${res.status}`);
      }
      return res.json(); // fetch需要手动解析JSON，没有res.data属性
    })
    .then((data) => {
      if (data.url) {
        window.location.href = data.url;
      }
    })
    .catch((err) => console.log(err.message));
  };
  return <button onClick={() => handleCheckOut()}>Check Out</button>;
};

修改后的Axios版本代码： #

Axios会自动处理JSON解析，这个版本问题较少，同样不需要额外的CORS头：

const handleCheckOut = () => {
  axios
    .post(`${url}/stripe/create-checkout-session`, { cartItems, userId: user._id })
    .then((res) => {
      if (res.data.url) {
        window.location.href = res.data.url;
      }
    })
    .catch((err) => console.log(err.message));
};
return <button onClick={() => handleCheckOut()}>Check Out</button>;

3. 额外验证检查点 #

• 确认后端服务器（localhost:5000）正常运行，没有崩溃
• 打印验证process.env.STRIPE_KEY和process.env.CLIENT_URL环境变量是否正确加载
• 如果使用Axios，检查全局配置中是否有错误的请求头设置

按以上步骤修改后，CORS错误应该就能解决，支付按钮可以正常跳转到Stripe的支付页面了。

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