React前端路由部署到Express生产环境非/路径无法访问问题

问题原因 #

开发环境下，Create React App的dev server会自动拦截所有路由请求，返回index.html让React Router处理路由逻辑；但生产环境中，Express默认只会匹配存在的静态文件，当访问/~/profile这类前端路由时，Express找不到对应的物理文件，就会返回cannot GET的404错误。

解决方案 #

在Express中添加兜底路由，当所有静态文件、API路由都不匹配时，返回前端打包后的index.html，让React Router接管路由处理。注意要把兜底路由放在所有路由配置的最后。

修改后的Express代码（server/index.ts） #

import express, {Express, Request, Response} from "express";
import path from "path";

const PORT: any = process.env.PORT || 3001;
const app: Express = express();

// 托管前端静态文件，注意路径要匹配你的项目结构（frontend/build）
app.use('/', express.static(path.join(__dirname, '../frontend/build')));

// 兜底路由：所有非静态文件、非API的请求都返回index.html
app.get('*', (req: Request, res: Response) => {
  res.sendFile(path.join(__dirname, '../frontend/build/index.html'));
});

app.listen(PORT, () => {
  console.log(`listening on ${PORT}`);
});

额外注意事项 #

1. 路径正确性：确保path.join(__dirname, '../frontend/build')指向正确的前端打包目录，你的项目结构里前端目录是frontend，而非代码里原写的client，需对应修正。
2. API路由顺序：如果项目中有后端API路由，必须将API路由定义在静态文件路由和兜底路由之前，避免API请求被兜底路由拦截。示例：

   // 先定义API路由
   app.get('/api/user-info', (req, res) => {
     res.json({username: 'example'});
   });
   
   // 再托管静态文件
   app.use('/', express.static(path.join(__dirname, '../frontend/build')));
   
   // 最后配置兜底路由
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, '../frontend/build/index.html'));
   });
   

3. 代理配置仅开发环境生效：前端package.json中的proxy配置只在开发环境起作用，生产环境无需保留，因为静态文件已由Express直接托管。

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