部署在Azure Web App的React+Node应用部分路由返回JSON而非HTML页面

核心结论 #

你不需要将Node应用和React应用分别运行在不同端口，当前同端口部署的方案本身是合理的，问题根源是前后端路由冲突以及Express的路由匹配优先级规则。

问题根因 #

你遇到的现象是典型的前后端路由重合冲突：

• 你在Express中先注册了所有API接口路由，其中GET /books/:id的接口路径，和React前端配置的/books/:id页面路由完全一致
• 应用内点击跳转时走React客户端路由，不会向服务端发请求，所以可以正常打开页面
• 当用户直接在地址栏输入路径、刷新页面时，请求会发到服务端，Express会优先匹配到先注册的API接口，直接返回JSON数据，不会走到后续返回index.html的兜底路由

修复方案 #

方案1：给API路由统一加前缀（推荐） #

这是最彻底的冲突解决方案，完全隔离前后端路由：

• 给所有Node接口路由统一添加/api前缀，例如原GET /books/:id调整为GET /api/books/:id
• 前端调用接口的请求路径同步修改为带/api前缀的路径
  修改后所有接口路径和前端页面路径不会再出现重合，从根源上避免匹配冲突。

方案2：调整兜底路由逻辑（无需修改接口路径） #

如果暂时无法调整接口路径，可以给兜底路由加请求类型判断，只对请求HTML的访问返回index.html：
修改server.js中的兜底路由代码：

app.get("*", (req, res, next) => {
  // 仅对接受HTML类型的请求返回页面，API请求正常走后续逻辑
  if (req.accepts('html')) {
    res.sendFile('index.html', { root });
  } else {
    next();
  }
})

路径校验 #

额外检查你生产环境的静态资源路径是否正确：
你当前代码中拼接的静态资源路径是path.join(__dirname,'..', 'client', 'build')，结合PM2配置的cwd为/home/site/wwwroot/server/，最终拼接路径为/home/site/wwwroot/client/build，请确认该路径和你实际存放React build产物的路径一致，否则兜底路由会返回404错误。

PM2配置说明 #

你无需修改现有PM2配置，也不需要额外启动新的服务占用其他端口，按上述方案修复路由冲突即可正常运行。

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