React+Node.js项目部署Heroku刷新页面报Cannot GET错误如何解决？

核心原因是Express路由遵循从上到下的匹配优先级，你之前的写法把前端通配路由放在了API接口路由之前，导致数据库查询类的API请求被拦截，直接返回了HTML文件，所以数据无法加载。按照以下顺序调整服务端代码即可：

• 第一步：优先定义所有服务端业务接口路由
  所有和MySQL交互的接口、鉴权接口等服务端路由，全部放在代码最靠前的位置，建议所有接口统一添加/api前缀，和前端路由做明确区分，示例：

  // 帖子查询接口示例
  app.get('/api/post/:id', async (req, res) => {
    // 原有查询MySQL返回数据的逻辑
  })
  // 其他所有服务端接口全部放在这一部分
  

• 第二步：配置前端静态资源服务
  接口路由全部定义完成后，再添加静态资源关联逻辑：

  app.use(express.static(path.join(__dirname, "build")));
  

• 第三步：最后添加前端路由通配规则
  所有非API的请求全部返回前端的index.html，交给React路由处理路径匹配：

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

如果你的前端路由需要统一前缀，只要对应修改React Router的basename配置，再把通配规则的路径对应调整即可，只要保证API路由在通配规则之前定义，就不会出现接口被拦截的问题。

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