MERN栈Heroku部署后Stripe支付无法跳转success页面（本地正常）

问题概述 #

使用MERN栈开发的集成Stripe支付功能的项目，本地环境下支付完成后可正常跳转至/success页面，但部署到Heroku后，支付完成跳转时出现Cannot GET /success的404错误。网站其他功能在Heroku上运行正常，仅支付后的跳转环节异常，Heroku日志与浏览器控制台均显示/success路径返回404。

相关日志信息 #

Heroku日志 #

at=info method=GET path="/success? session_id=cs_test_a1d94XAhzPyyubwBg7Lk3FXKmpViqUYK6UGzcqON3HAdD5ELFUINJyOVsX" host=thawing-headland-75590.herokuapp.com request_id=7aff0f42-cd34-4d12-b5b3- 858ff60e16de fwd="174.112.119.39" dyno=web.1 connect=0ms service=1ms status=404 bytes=390 protocol=https.

浏览器控制台信息 #

constants.override.js:1  GET https://thawing-headland-75590.herokuapp.com/success?session_id=cs_test_a1jXbh7ZPggtKlX0840DpYCfTZXr5uZp5soNzvQoCfGRVBVEpmtzfR9lPj 404 (Not Found)a.handleSuccess @   constants.override.js:1a   @   js.stripe.com/v3/fin…36134c4204a1d0.js:1setTimeout (async)      (anonymous) @   js.stripe.com/v3/fin…36134c4204a1d0.js:1value   @   constants.override.js:1Lr  @   content.js:1t.unstable_runWithPriority  @   content.js:1Ot  @   content.js:1jr  @   content.js:1Sr  @   content.js:1(anonymous) @   content.js:1t.unstable_runWithPriority  @   content.js:1Ot  @   content.js:1At  @   content.js:1Nt  @   content.js:1_r  @   content.js:1notify  @   content.js:1notifyNestedSubs    @   content.js:1n   @   content.js:1l   @   content.js:1(anonymous) @   constants.override.js:1(anonymous) @   content.js:1dispatch    @   content.js:1(anonymous) @   constants.override.js:1.

代码问题分析 #

查看server.js代码，当前仅针对根路径/配置了返回React构建文件的路由：

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "../client/build/index.html"));
});

但支付完成后Stripe会直接发起对/success的GET请求，Express作为后端服务器找不到对应的路由处理逻辑，因此返回404。而本地环境正常是因为本地开发服务器（如Create React App的dev server）默认配置了单页应用的路由 fallback，会把所有未匹配的请求转发到index.html，由React Router处理前端路由。

解决方案 #

修改server.js中的路由配置，将单页应用的路由 fallback 设置为通配符*，让所有未匹配到API或静态资源的GET请求都返回index.html，交由React Router处理前端路由：

修改后的server.js相关代码：

// 保留原有静态资源、Apollo中间件等配置...

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../client/build")));
}

// 替换原有根路径路由为通配符路由
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../client/build/index.html"));
});

// 启动Apollo服务器的代码不变...

注意事项 #

1. 确保React项目中已通过React Router配置了/success路径对应的页面组件，本地环境正常说明该配置已存在。
2. 路由配置顺序很重要：静态资源中间件、Apollo中间件需要放在通配符路由之前，避免API请求或静态资源被错误转发到index.html。

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