React集成Stripe创建Checkout Session时出现404错误求助

核心问题：端口冲突 #

你的React开发服务器（Vite默认端口5173）和Express后端服务器使用了同一个端口，导致前端发送的/create-checkout-session请求实际上被React服务器接收，而非Express服务器，因此出现404路由未找到错误。

另外存在严重安全问题：前端代码中直接包含了Stripe秘钥（sk_test_...），秘钥绝对不能暴露在前端环境中，只能在后端使用；前端应使用Stripe公钥（pk_test_...）。

解决方案步骤 #

1. 修改后端服务器端口

将Express服务器的监听端口从5173改为未被占用的端口（例如3000）：

// server.cjs
// ...其他代码
app.listen(3000, () => console.log("Running on port 3000"));

2. 更新前端请求地址

修改PurchaseButton组件中的fetch目标地址，指向后端新端口：

// purchasebutton.jsx
const response = await fetch("http://localhost:3000/create-checkout-session", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ priceId }),
});

3. 移除前端的Stripe秘钥

删除前端代码中的stripeApiKey变量，秘钥仅保留在后端。若需在前端初始化Stripe，应使用**公钥（pk_test_xxx）**并通过官方SDK加载：

// 前端Stripe初始化示例
import { loadStripe } from "@stripe/stripe-js";
const stripePromise = loadStripe("pk_test_..."); // 此处使用公钥

4. 优化CORS配置（可选）

当前app.use(cors())允许所有来源访问，开发环境下可正常使用。若需更严格的权限控制，可指定仅允许前端端口访问：

app.use(cors({ origin: "http://localhost:5173" }));

验证流程 #

1. 重启Express服务器，确认控制台输出Running on port 3000
2. 启动React开发服务器（端口5173）
3. 点击购买按钮，检查请求目标为http://localhost:3000/create-checkout-session，此时应能正确命中后端路由，不再返回404。

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