部署后通过Stripe完成支付后出现404错误的技术求助

核心问题 #

食品电商部署后，Stripe支付成功跳转时出现404错误，本地开发无此问题，预期支付成功后跳转至/myorders页面。

可能原因及修复步骤 #

1. 静态站点路由Fallback未配置 #

Vercel等静态托管平台默认不支持React Router的客户端路由，直接访问/verify这类非根路径会返回404。

修复：

• 若使用Create React App，在public目录下创建_redirects文件，写入：

  /*    /index.html   200
  

• 若使用Vite，在vite.config.js中添加配置，并在Vercel项目设置里配置Rewrites：

  // vite.config.js
  export default defineConfig({
    build: { outDir: 'dist' },
    resolve: { alias: { '@': path.resolve(__dirname, './src') } },
  })
  

  Vercel配置文件vercel.json：

  {
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
  }
  

2. Stripe回调URL未更新为线上地址 #

本地开发时的回调URL（如http://localhost:3000/verify）在部署后未替换为线上地址，导致Stripe跳转至不存在的路径。

修复：
在后端创建Stripe支付会话的代码中，更新success_url和cancel_url为部署后的完整地址：

const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  line_items: [...],
  mode: 'payment',
  success_url: 'https://food-ecommerce-pi.vercel.app/verify?success=true&order_id={ORDER_ID}',
  cancel_url: 'https://food-ecommerce-pi.vercel.app/verify?success=false&order_id={ORDER_ID}',
});

同时在Stripe控制台同步更新对应配置。

3. 后端API路径或跨域配置问题 #

部署后后端URL未切换为线上地址，或跨域策略未允许前端域名，导致verifyPayment请求失败，跳转逻辑未执行。

修复：

• 确认StoreContext中的url为线上后端API地址，而非本地地址。
• 后端Express配置CORS时允许前端域名：

  app.use(cors({
    origin: 'https://food-ecommerce-pi.vercel.app',
    credentials: true,
  }));
  

4. 前端路由映射错误 #

检查路由配置，确认/verify路径已正确关联Verify组件：

// 路由配置示例
import { Routes, Route } from 'react-router-dom';
import Verify from './components/Verify';
import MyOrders from './components/MyOrders';

function App() {
  return (
    <Routes>
      <Route path="/verify" element={<Verify />} />
      <Route path="/myorders" element={<MyOrders />} />
      {/* 其他路由 */}
    </Routes>
  );
}

额外排查动作 #

• 打开浏览器开发者工具Network面板，查看Stripe跳转后的请求状态，以及verifyPayment的API请求是否成功。
• 检查Vercel部署日志，确认前端构建完整、路由资源正常生成。
• 确认order_id参数是否正确传递到Verify组件，后端能否正常查询并更新订单。

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