Express动态添加路由后出现404问题，如何排查解决？

核心问题：服务器启动早于路由挂载完成 #

你的代码里，服务器server.listen是在异步路由挂载逻辑完成前就启动了。MountRouters是异步函数，你在app.js里用立即执行异步函数调用它，但没有等待它执行完毕就让服务器开始接收请求。此时路由还没挂载到Express实例上，自然无法匹配请求，返回404。

解决方案：调整启动顺序，等路由挂载完成再启动服务器 #

方式1：整合启动逻辑到app.js的异步流程中

直接把服务器启动逻辑放到路由挂载完成后的回调里，避免跨文件的异步同步问题：

修改app.js，添加http模块导入并调整初始化流程：

import celebrate from 'celebrate';
import cookieParser from 'cookie-parser';
import cors from 'cors';
import dotenv from 'dotenv';
import express from 'express';
import createError from 'http-errors';
import logger from 'morgan';
import path from 'path';
import http from 'http'; // 新增导入http模块

import MountRouters from './utils/MountRouter';

dotenv.config();

const app = express();

app.use(logger('dev'));
app.use(cors());
app.use(express.json({ limit: '2GB' }));
app.use(express.urlencoded({ extended: false, limit: '50mb' }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'build')));

// 整合异步初始化和服务器启动
(async () => {
  await MountRouters(app);

  // 路由和404处理必须在路由挂载后定义
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });

  app.use(function (req, res, next) {
    next(createError(404));
  });

  app.use(celebrate.errors());

  app.use(function (err, req, res, next) {
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
    res.status(err.status || 500);
    res.send(err.message);
  });

  // 启动服务器
  const port = process.env.PORT || 3000;
  app.set('port', port);
  const server = http.createServer(app);
  server.listen(port, () => {
    console.log(`\x1b[33mServer listening on port ${port}`);
  });
})().catch(err => {
  console.error('Failed to initialize app:', err);
  process.exit(1);
});

module.exports = app;

之后可以删掉单独的server.js，或者把server.js的日志逻辑整合到上面的代码里。

方式2：保持现有文件结构，通过事件通知服务器启动

如果想保留server.js，可以在app.js完成路由挂载后触发自定义事件，让服务器监听该事件后再启动：

1. 修改app.js的异步初始化逻辑：

// ... 其他代码 ...

(async () => {
  await MountRouters(app);

  // 路由和中间件配置...

  // 触发ready事件，通知服务器可以启动了
  app.emit('ready');
})().catch(err => {
  console.error('Failed to mount routers:', err);
  process.exit(1);
});

// ... 导出app ...

2. 修改server.js，等待app的ready事件：

const app = require('./app');
const http = require('http');

const port = process.env.PORT || 3000;
app.set('port', port);

const server = http.createServer(app);

// 等待app初始化完成（路由挂载完毕）
app.on('ready', () => {
  server.listen(port, onListening);
});

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;
  console.log(`\x1b[33mServer listening on ${bind}`);
}

额外排查点 #

• 确认路由文件导出正确：每个路由文件（如routes/{name}/router.js）必须正确导出Express Router实例为default：

import express from 'express';
const router = express.Router();

// 示例POST路由
router.post('/your-path', (req, res) => {
  res.status(200).send('Success');
});

export default router;

• 核对请求路径和方法：确保Postman的请求URL是http://localhost:3000/api/v1/{name}/your-path，且请求方法是POST，和路由定义一致。
• 检查中间件顺序：所有路由挂载必须在404捕获中间件(app.use(function(req,res,next){next(createError(404))}))之前完成，否则未匹配的请求会直接进入404流程。

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