React项目部署后Stripe支付出现404错误的技术求助

核心问题分析 #

部署后出现的SyntaxError: Unexpected token '<'，本质是前端请求支付相关API时，后端返回了HTML页面（大概率是404错误页），而非预期的JSON数据。结合控制台的404资源加载失败提示，说明部署环境下的路由配置、静态文件服务或API端点存在匹配问题。

具体修复步骤 #

1. 检查API端点的路由匹配 #

在server.js中，确保Stripe相关API路由未被静态文件路由覆盖，且部署环境下请求路径正确：

• 严格遵循先静态文件服务，再API路由，最后兜底路由的顺序，避免API请求被当成静态文件处理：

  // 正确顺序示例
  const path = require('path');
  app.use(express.static(path.join(__dirname, 'client/build')));
  
  // Stripe支付Intent创建接口
  app.post('/create-payment-intent', async (req, res) => {
    // 你的业务逻辑代码
  });
  
  // 兜底返回前端页面（处理SPA路由）
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
  

• 检查CheckoutForm.js中请求API的路径，禁止硬编码localhost，改用相对路径适配部署域名：

  // 错误示例
  fetch('http://localhost:3000/create-payment-intent', { method: 'POST', ... })
  // 正确示例
  fetch('/create-payment-intent', { method: 'POST', ... })
  

2. 验证Stripe前端资源加载 #

检查Checkout.js中Stripe.js的加载方式，确保部署环境下能正确获取资源：

• 直接使用Stripe官方CDN加载，不要用本地文件：

  <script src="https://js.stripe.com/v3/"></script>
  

• 前端初始化Stripe时，通过环境变量传递公钥，避免硬编码（部署平台需配置对应环境变量）：

  const stripe = Stripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);
  

3. 部署环境的环境变量配置 #

确保部署服务器正确配置Stripe密钥：

• server.js中通过环境变量读取Stripe私钥：

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

• 检查部署平台（如Vercel、Netlify、Heroku）的环境变量设置，确认密钥拼写正确、未遗漏。

4. HTTPS适配检查 #

部署在HTTPS域名下，需避免混合内容问题：

• 所有API请求使用相对路径或HTTPS绝对路径，禁止使用HTTP请求
• 若配置了Stripe Webhook，确保端点为HTTPS且部署平台允许外部请求访问

快速验证方法 #

1. 在浏览器直接访问API端点（如https://cyber-frog.co.uk/create-payment-intent）：
   • 返回HTML → 路由匹配错误
   • 返回{"error":"Method Not Allowed"} → 请求方法不匹配（比如用了GET而非POST）
2. 查看部署服务器日志（如Heroku的heroku logs、Vercel的函数日志），确认API请求是否到达后端，以及是否有具体报错信息。

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