Express配置express.static后根路由get处理函数未触发是什么原因？

问题原因 #

Express 的中间件、路由规则严格按照注册顺序从上到下匹配执行，只要某个处理逻辑匹配到请求并返回了响应，后续所有注册的逻辑都会终止执行。

你用到的express.static中间件默认开启了index配置，默认值为index.html：当请求路径为/时，中间件会自动查找你指定的静态目录下是否存在index.html，如果存在就直接返回该文件作为响应，所以不会走到你后续注册的app.get('/')处理逻辑中。

解决方案 #

有两种常用的方案可以解决这个冲突：

方案1：调整注册顺序 #

将自定义根路由的注册顺序放在静态资源中间件之前：

const app = express();

// 先注册根路径自定义处理逻辑
app.get('/', (req, res) => {
  console.log('received request');
  res.sendFile(path.resolve('../frontend/dist/index.html'));
});

// 后注册静态资源中间件，处理JS、CSS等非根路径的静态资源请求
app.use(express.static(path.resolve('../frontend/dist')));

const server = http.createServer(app);

这种方案的逻辑是：访问根路径时优先命中自定义路由，其他静态资源请求匹配不到自定义路由，会继续走到静态资源中间件正常返回。

方案2：关闭express.static的默认index返回规则 #

如果不想调整注册顺序，可以在注册静态资源中间件时关闭默认的index.html查找逻辑：

const app = express();
// 新增配置项 index: false 关闭根路径自动返回index.html的逻辑
app.use(express.static(path.resolve('../frontend/dist'), { index: false }));

const server = http.createServer(app);

app.get('/', (req, res) => {
  console.log('received request');
  res.sendFile(path.resolve('../frontend/dist/index.html'));
});

这种方案的逻辑是：express.static遇到根路径请求时不会自动处理，会继续向下匹配到你定义的根路由，其他静态资源的请求依然会被express.static正常处理。

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