如何在Monorepo中让Axios正确请求Express路由？

问题 #

采用Monorepo架构构建项目，目前无法让Axios正确请求路由。点击按钮触发以下请求代码：

const handleSubmit = () => {
    console.log("button clicked");
    axios.get('/', {
      params: {
        username: "John1904",
      }
    })
    .then((res) => {
      console.log(res.data);
    });
};

请求根路径时能正常获取响应，但请求/users或/users/时出现404错误：

>GET http://localhost:3000/users?username=John1904 404 (Not Found)
>Uncaught (in promise) AxiosError {message: 'Request failed with status code 404'

浏览器控制台显示上述错误，但终端无其他输出。路由处理文件index.ts内容如下：

const app: Express = express();
const port = process.env.PORT;

app.use(helmet());
app.use(cors());
app.use(express.json());

app.use('/users', usersRouter);

app.use('/', (_req, res) => res.status(200).send('Service online'));

app.use(errorHandler);
app.use(notFoundHandler);

usersRouter文件（server/src/routes/users/router.ts）内容为：

const router = express.Router();

router.get('/', async (_req: Request, res: Response) => {
  try {
    const items = await UserService.findAll();

    res.status(200).send(items);
  } catch (e) {
    res.status(500).send(unwrapRouterErrorMessage(e));
  }
});

为何请求无法进入app.use('/users', usersRouter)对应的路由？

分析与解决 #

问题出在路由匹配的顺序上：

• app.use采用前缀匹配规则，所有请求路径都会匹配到/这个前缀（包括/users）。你在注册/users路由后立刻注册了根路径响应中间件，导致请求/users时会被该中间件拦截并返回响应，不会继续执行后续的/users路由逻辑。

解决方法：调整路由注册顺序，把根路径响应中间件放到所有业务路由之后：

const app: Express = express();
const port = process.env.PORT;

app.use(helmet());
app.use(cors());
app.use(express.json());

// 先注册所有业务路由
app.use('/users', usersRouter);

// 再注册根路径响应
app.use('/', (_req, res) => res.status(200).send('Service online'));

app.use(errorHandler);
app.use(notFoundHandler);

调整后，请求/users会优先匹配到对应的路由并执行逻辑，不会被根路径中间件拦截。同时请确认usersRouter已正确导入到index.ts中，避免因路径拼写错误导致路由未加载。

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