React+Express+serve-static末尾斜杠301重定向问题求助

项目背景 #

个人项目，为节省成本将React（CRA）与Express部署在同一Heroku服务器。开发环境中Express运行在3000端口，CRA运行在3001端口，通过CRA的package.json配置"proxy": "http://localhost:3000"，运行正常。

前端路由配置 #

基础CRA项目，使用BrowserRouter：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/whatever" element={<Whatever />} />
    <Route path="*" element={<NotFound />} />
  </Routes>
</BrowserRouter>

后端Express配置 #

原逻辑：根路径提供CRA静态文件，匹配API路由，最后兜底返回CRA应用：

import express from 'express';
import path from 'path';
import serveStatic from 'serve-static';

const router = express.Router(),
      root = path.join(__dirname, '..', '..');

const frontendPublicPath = path.join(root, '..', 'frontend', 'build');

router.use('/', serveStatic(frontendPublicPath));
router.use('/api/user', (req, res) => res.json(req.socket.remoteAddress));
router.use('/api/admin/esi/fetch', ensureAuthenticated, admin.fetchEndpoints);
router.use('/api/admin/esi/update', ensureAuthenticated, admin.updateEndpoints);

router.use('*', serveStatic(frontendPublicPath));
app.use('/', router);

问题现象 #

在Heroku生产环境出现末尾斜杠重定向问题：

• 直接请求https://example.org，正常返回无重定向
• 直接请求https://example.org/page，被301重定向到https://example.org/page/
• 前端路由跳转至/page无重定向，因为不触发后端请求
• 本地开发环境无此问题

已尝试方案 #

1. 将express.Router()改为express.Router({ strict: true })，无效，重定向来自serve-static中间件
2. 给serve-static添加{ redirect: false }配置：

   router.use('/', serveStatic(frontendPublicPath, { redirect: false }));
   ...
   router.use('*', serveStatic(frontendPublicPath, { redirect: false }));
   

   本地正常，但生产环境深层链接（如https://example.org/page）返回Cannot GET /page，仅带斜杠的路径正常

解决方案 #

核心问题是serve-static会将不存在的文件路径误认为目录，自动重定向到带斜杠的路径。调整路由逻辑，让所有非API、非静态文件的请求直接返回index.html，交由前端路由处理：

修改后端代码如下：

import express from 'express';
import path from 'path';

const router = express.Router();
const root = path.join(__dirname, '..', '..');
const frontendPublicPath = path.join(root, '..', 'frontend', 'build');
const indexPath = path.join(frontendPublicPath, 'index.html');

// 优先匹配API路由
router.use('/api/user', (req, res) => res.json(req.socket.remoteAddress));
router.use('/api/admin/esi/fetch', ensureAuthenticated, admin.fetchEndpoints);
router.use('/api/admin/esi/update', ensureAuthenticated, admin.updateEndpoints);

// 处理静态资源：仅当请求路径对应实际文件时返回，否则交给后续中间件
router.use(express.static(frontendPublicPath, {
  redirect: false, // 关闭自动加斜杠的重定向
  fallthrough: true // 文件不存在时不拦截，继续执行后续逻辑
}));

// 所有非API、非静态文件的请求，直接返回index.html
router.get('*', (req, res) => {
  res.sendFile(indexPath);
});

app.use('/', router);

关键调整说明 #

1. 路由顺序调整：API路由放在最前面，避免被静态资源或兜底路由拦截
2. 静态资源配置：redirect: false关闭serve-static的自动重定向逻辑；fallthrough: true确保文件不存在时，请求能传递到兜底路由
3. 兜底路由：用router.get('*')直接返回index.html，让前端路由接管所有深层链接的处理，彻底避免后端重定向

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