Nodejs 如何去除浏览器请求favicon.ico文件带来的干扰？

Nodejs 如何去除浏览器请求favicon.ico文件带来的干扰？

浏览器每次发起请求，都会同时请求一次favicon.ico（本次不讨论浏览器缓存了favicon.ico）

我用http.createServer()打开了8080端口来监听post过来的数据，然后根据post过来的数据进行下一步任务处理。

但我发现，每次post数据过来，都是请求了favicon.ico导致出现了莫名的bug…

<form method=“post” action=“http://xxx.xx.xxx.xxx:8080”> <input type=‘hidden’ name=‘username’ value=‘USERNAME’> <input type=‘submit’ value=‘ok’>

http.createServer(function(req, res) {

if(req.url == ‘/favicon.ico’){ res.end(); }else{ req.addListener(‘data’,function(postDataChunk) { var postdata =’’; postdata+=postDataChunk; });

req.addListener(‘end’,function(){ console.log(postdata); });
}

res.end();

}).listen(8080);

post提交几次看看结果。。。。。 该如何过滤掉favicon的请求。。。。新人求救


7 回复

为了去除浏览器请求 favicon.ico 文件带来的干扰，你可以通过在服务器端拦截对 favicon.ico 的请求，并直接返回一个空响应。以下是一个简单的 Node.js 示例代码，展示了如何实现这一点。

示例代码

const http = require('http');

// 创建 HTTP 服务器
http.createServer((req, res) => {
    // 检查请求 URL 是否为 /favicon.ico
    if (req.url === '/favicon.ico') {
        // 如果是 favicon 请求，则直接结束响应
        res.writeHead(204); // 使用 204 No Content 状态码
        res.end();
    } else {
        // 其他请求继续处理
        let postdata = '';

        req.on('data', (chunk) => {
            postdata += chunk.toString();
        });

        req.on('end', () => {
            console.log(postdata);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.end('Data received');
        });
    }
}).listen(8080, () => {
    console.log('Server is running on port 8080');
});

解释

  1. 创建 HTTP 服务器：

    const http = require('http');
http.createServer((req, res) => {
    ...
}).listen(8080, () => {
    console.log('Server is running on port 8080');
});

    这部分代码创建了一个 HTTP 服务器，并监听 8080 端口。

  2. 检查请求 URL：

    if (req.url === '/favicon.ico') {
    res.writeHead(204); // 使用 204 No Content 状态码
    res.end();
}

    当请求 URL 是 /favicon.ico 时，服务器返回一个 204 No Content 响应并立即结束响应。这表示请求成功，但没有内容需要返回。

  3. 处理 POST 数据：

    let postdata = '';
req.on('data', (chunk) => {
    postdata += chunk.toString();
});

req.on('end', () => {
    console.log(postdata);
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Data received');
});

    对于其他请求（如 POST 请求），服务器会收集请求体中的数据，并在请求结束时打印出来。

通过这种方式，你可以有效地过滤掉浏览器对 favicon.ico 的请求，避免其对你的主要业务逻辑造成干扰。


我没有用Express，而是写了returnData(‘query_string’,res){}响应ajax数据请求，写了returnFile(‘filename’,res){}响应文件请求，然后把需要公开的文件列表放在publicFileList=[]里保证安全（如果请求的文件不在里面就返回404），其中就包括’favicon.ico’图标文件。

对图标文件的请求是无法过滤的，这是由浏览器发起的。你可以响应404…另外，看你写的处理方法也可以啊,直接终止响应。

url匹配下favicon.ico，匹配到直接返回

connect 有个专门用来处理 favicon 的中间件，我印象中。

this

https://github.com/theworkers/connect-favicons

你可以通过检查 req.url 并在请求为 /favicon.ico 时直接结束响应，从而过滤掉浏览器请求 favicon.ico 文件的行为。下面是一个改进后的代码示例：

const http = require('http');

http.createServer((req, res) => {
    // 检查请求路径是否为 /favicon.ico
    if (req.url === '/favicon.ico') {
        res.writeHead(204);  // 返回状态码 204，表示请求成功但没有内容
        res.end();
        return;
    }

    let postdata = '';

    req.on('data', (chunk) => {
        postdata += chunk;
    });

    req.on('end', () => {
        console.log(postdata);
        res.end();  // 处理完 POST 数据后结束响应
    });
}).listen(8080, () => {
    console.log('Server is listening on port 8080');
});

解释：

  1. 检查请求路径：通过 if (req.url === '/favicon.ico') 来判断请求路径是否为 /favicon.ico。如果是，则直接返回状态码 204 并结束响应。
  2. 处理 POST 数据：如果请求不是 /favicon.ico，则继续监听 data 和 end 事件来收集 POST 数据，并在收集完成后输出。

这样可以确保 favicon.ico 的请求不会影响你的主逻辑。

回到顶部