创建Node.js服务器遇重复调用问题：访问localhost:3000触发3次中间件日志

问题原因 #

浏览器访问页面时，会自动发起额外请求（最常见的是/favicon.ico请求，用于加载网站图标），部分浏览器还可能触发预加载类请求。你注册的是全局中间件（app.use()无路由限制），所有到达服务器的请求都会触发这些中间件，所以会出现多组日志输出。

解决方案 #

方案1：拦截favicon请求

在中间件前添加专门处理/favicon.ico的路由，避免它触发后续中间件链：

const express = require('express')
const app = express();

// 处理favicon请求，返回无内容状态码
app.get('/favicon.ico', (req, res) => res.status(204).end());

app.use( (req,res,next)=>{
    console.log('First middleware');
    next();
});

app.use( (req,res,next)=>{
    console.log('Second middleware');
    res.send('Hello from express');
});

module.exports = app;

204状态码表示“无内容”，浏览器收到后不会重复发起favicon请求。

方案2：限制中间件作用路由

如果中间件只需要处理首页请求，给app.use()指定路由范围：

const express = require('express')
const app = express();

// 仅对根路径请求生效
app.use('/', (req,res,next)=>{
    console.log('First middleware');
    next();
});

app.use('/', (req,res,next)=>{
    console.log('Second middleware');
    res.send('Hello from express');
});

module.exports = app;

这样只有访问/的请求会触发日志，其他请求不会进入这些中间件。

方案3：排查请求来源

在中间件里打印请求路径，明确触发日志的请求类型：

app.use( (req,res,next)=>{
    console.log(`First middleware - 请求路径: ${req.path}`);
    next();
});

app.use( (req,res,next)=>{
    console.log(`Second middleware - 请求路径: ${req.path}`);
    res.send('Hello from express');
});

运行后可直观看到每个日志对应的请求路径，方便定位额外请求的来源。

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