MERN集成Stripe Checkout时报缺少API密钥错误无法跳转托管支付页

• 前后端鉴权边界完全错位：Stripe的sk_格式的密钥绝对不能出现在前端代码中。你在前端请求头里拼接的Authorization: Bearer ${process.env.REACT_APP_STRIPE_SECRET_KEY}存在两个致命问题：一是这类带REACT_APP_前缀的变量会被React打包工具编译进前端静态资源，一旦配置就相当于把支付密钥公开给所有访问站点的用户，存在极高的资金安全风险；二是前端构建阶段根本不会加载服务端的私有环境变量，这个字段取出来是空值，后端初始化Stripe SDK时如果没读到有效密钥，调用Stripe接口就会直接触发无API密钥的报错。
• 请求逻辑冗余混乱：你的请求目的地是自己写的后端接口/api/payment/checkout-session，根本不需要在前端请求头里携带Stripe的鉴权信息——Stripe的API鉴权完全是后端调用时完成的，你额外加的鉴权头不仅没用，还会干扰正常的请求链路。
• 响应取值逻辑错误：axios返回的响应对象中，后端返回的JSON内容是挂在data属性下的，你之前写的response.id根本拿不到会话ID，就算接口跑通也会因为sessionId为空导致跳转失败。
• 后端环境变量加载风险：后端初始化Stripe SDK时直接读取process.env.STRIPE_SECRET_KEY，如果服务启动时没正确加载dotenv配置、没注入对应环境变量，SDK会处于未鉴权状态，同样会触发缺密钥报错。

• 移除前端App.js里所有手动配置Stripe鉴权头的代码，修正后的Checkout点击逻辑如下：

const handleCheckoutClick = async () => {
  const stripe = await stripePromise;
  // 直接请求自有后端接口，不要携带任何Stripe相关的鉴权头
  const response = await axios.post("/api/payment/checkout-session");
  // 注意从response.data字段下取会话ID
  const sessionId = response.data.id;
  await stripe.redirectToCheckout({ sessionId });
};

• 确认后端服务启动时正确加载了Stripe密钥环境变量，不要将服务端密钥用REACT_APP_前缀命名，避免被前端打包工具扫描打包到静态资源中。
• 前端仅保留Stripe公钥（pk_开头）的初始化逻辑即可，所有需要密钥参与的操作（创建Checkout会话、校验支付结果、处理退款等）全部在后端完成，不要让前端接触到任何带权限的密钥字段。

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