基于Accept请求头的Express通配路由穿透问题求助

需要实现一个Express服务器，同时支持React客户端路由的Web前端和服务端JSON API，二者共用相同URL，返回内容由HTTP Accept请求头决定：

• 访问/users/bob时，浏览器请求（Accept头非application/json）返回HTML页面，由React Router处理客户端路由
• 携带application/json Accept头的请求，返回对应JSON数据

尝试的代码运行时出现错误：Error: Can't set headers after they are sent.

1. 无条件调用next()：返回静态HTML后仍调用next()，导致Express继续执行后续路由/中间件，试图再次修改响应头或发送内容，触发"已发送响应后无法设置头"的错误。
2. 请求过程中动态注册路由：在中间件的else块内注册API路由，会导致每次请求都重复添加路由，引发路由冲突和内存泄漏。
3. 路由注册逻辑混乱：API路由应该提前在请求处理流程外注册，而非在单次请求中动态添加。

import fs from "fs/promises";
import express from "express";

const app = express();
// 提前加载静态HTML文件，仅读取一次提升性能
const staticPage = await fs.readFile("./frontend/dist/index.html", "utf-8");

// 前置中间件：判断请求类型，分流处理
app.use(async (req, res, next) => {
  // 若请求不要求JSON，直接返回HTML并终止响应链
  if (req.headers.accept !== "application/json") {
    return res.status(200).send(staticPage);
  }
  // 若为JSON请求，交给后续API路由处理
  next();
});

// 注册所有API路由（仅JSON请求会进入这里）
app.get("/", async (req, res) => {
  res.status(200).json({ hello: "world" });
});

app.get("/users/:id", async (req, res) => {
  res.status(200).json({ id: req.params.id });
});

// 其他API路由...

// 启动服务器
app.listen(3000, () => {
  console.log("Server running on port 3000");
});

• HTML预加载：将文件读取逻辑放在路由注册前，避免每次请求重复读取文件，提升服务性能。
• 响应链终止：返回HTML时使用return终止中间件链，防止后续逻辑重复修改响应。
• 路由顺序：API路由必须放在Accept头判断中间件之后，确保只有符合条件的请求才会触发API逻辑。
• 灵活的Accept头判断：如果需要支持包含application/json的多值Accept头（如Accept: text/html,application/json），可以替换为req.accepts('json')判断：

  if (!req.accepts('json')) {
    return res.status(200).send(staticPage);
  }
  

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