没有图标请求

Question

我正在使用节点的 http 模块编写一个简单的 node.js 文件服务器（我没有使用 EXPRESS）。

我注意到我的初始 GET 请求正在触发，所有后续 GET 请求都是针对 css 和 javascript；但是，我没有收到网站图标的请求。即使在查看页面检查器时，我也没有任何错误，资源中也没有显示图标。

HTML

// Inside the head of index.html
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">

node.JS

http.createServer(function(req, res){

    // log each req method
    console.log(`${req.method} request for ${req.url}`);

}).listen(3000)

有一个默认图标是小胡子，但不是我的自定义图标。我在这里错过了什么？

以防与问题相关。我正在使用节点 v4.2.4

编辑

我认为这与我阅读和提供文件的方式有关。

if ( req.url.match(/.ico$/) ){
    var icoPath = path.join(__dirname, 'public', req.url);
    var fileStream = fs.createReadStream(icoPath, "BINARY");
    res.writeHead(200, {"Content-Type": "image/x-icon"});
    fileStream.pipe(res)

我不应该使用读取流吗？编码是Binary还是utf-8还是别的？

Answer 1

浏览器在加载页面时自动向favicon.ico本身发出请求。这段代码，end是[=14] =]ponse，将收到图标请求：

http.createServer(function(req, res) {
    console.log(`${req.method} ${req.url}`);
    res.writeHead(200);
    res.end();
}).listen(3000);

正如您在运行的日志中看到的那样：

GET /
GET /favicon.ico

Answer 2

我试过你的回购代码并做了一些更改，看看我是否可以为我的 favicon 服务。我发现了一些奇怪的东西：

favicon 服务是棘手和神秘的（我的观点）
Chrome 曾经有一个错误，或者可能仍然与 favicon 有关（Google 请，有很多结果）
似乎是浏览器缓存 favicon、强制刷新和用于使浏览器获取 new/updated favicon 的不同方法，参见 here
我发现一旦 Chrome 浏览器被提供了 favicon 然后在随后的请求中，就没有更多的 favicon 请求了。直到您在 html 文件中更改 favicon 的 href 并强制浏览器发出新请求。

我复制了 bit/pieces 您的代码以重现问题并使其正常运行。我决定以不同的方式提供 favicon 见下文：

server.js

if(req.url.match("/requestFavicon") ){
    var img = fs.readFileSync('public/favicon.ico');
    res.writeHead(200, {'Content-Type': 'image/x-icon' });
    res.end(img, 'binary');
}

index.html

<link rel="shortcut icon" type="image/x-icon" href="/requestFavicon"/>

做了 nodemon server.js 并使用 Chrome 浏览器发出 http://192.168.1.18:8080 请求。 terminal 显示如下：

GET request for /
GET request for /requestFavicon

而在浏览器中显示的 favicon.ico（取自 here 的微型车辆 .ico）如下所示：

在显示上面的favicon之后，任何后续的http://192.1668.18:8080都没有产生对favicon的请求，但是在nodejs的终端中只显示了以下请求

GET request for /

浏览器开发者工具网络选项卡中同样没有 favicon 相关请求。

此时，我假设浏览器已经缓存了它，根本不请求，因为它已经有了。所以我用谷歌搜索并遇到了这个 SO question 强制刷新图标请求。因此，让我们更改 index.html（和 server.js）中的 favicon href，然后重试

<link rel="shortcut icon" type="image/x-icon" href="/updatedRequestFavicon"/>

现在重试访问 http://192.168.1.18:8080 并观察 nodejs 终端以及 chrome 开发人员控制台，我得到以下信息：

GET request for /
GET request for /UpdatedRequestFavicon

现在我想完全改变 favicon 并放一个新的。我添加了 this 更新了 server.js 并刷新了浏览器。令人惊讶的是，nodejs 中没有控制台登录（对于 new favicon），浏览器开发人员工具 newtork 控制台中没有请求（因此提供了缓存值）。

为了强制浏览器获取新的 favicon，我想更改 index.html 中 favicon 的 href 并更新 server.js使用新的 href，然后查看 brwoser 是否被迫请求更新的图标或继续使用缓存的图标。

<link rel="shortcut icon" type="image/x-icon" href="/NewFavicon"/>
if(req.url.match("/NewFavicon") ){
    var img = fs.readFileSync('public/favicon_new.ico');
    res.writeHead(200, {'Content-Type': 'image/x-icon' });
    res.end(img, 'binary');
 }

已更改。由 nodemon 重新加载的更改，刷新浏览器，结果如下：

GET request for /
GET request for /NewFavicon

您的问题可能与

有关

浏览器已经有一个缓存的图标，因此不请求它
您没有在 server.js
其他

如果你想测试我的代码，请随意，这里是 server.js

var http = require('http');
var fs = require('fs');
var path = require('path');

var server = http.createServer(function(req, res) {
    // Log req Method
    console.log(`${req.method} request for ${req.url}`);
  //res.writeHead(200);
  //res.end('index.html');

    // Serve html, js, css and img
    if ( req.url === "/" ){
        fs.readFile("index.html", "UTF-8", function(err, html){
            res.writeHead(200, {"Content-Type": "text/html"});
            res.end(html);
        });
    }

    if(req.url.match("/NewFavicon") ){
        console.log('Request for favicon.ico');

        var img = fs.readFileSync('public/favicon_new.ico');
        res.writeHead(200, {'Content-Type': 'image/x-icon' });
        res.end(img, 'binary');

        //var icoPath = path.join(__dirname, 'public', req.url);
        //var fileStream = fs.createReadStream(icoPath, "base64");
        //res.writeHead(200, {"Content-Type": "image/x-icon"});
        //fileStream.pipe(res);
    }
});
server.listen(8080);

这里是index.html

<!DOCTYPE html>
<html>
<head>
  <title>nodeCAST</title>
  <link rel="shortcut icon" type="image/x-icon" href="/NewFavicon"/>
  <!--<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
  <link rel="icon" href="img/favicon.ico" type="image/x-icon">-->
</head>
<body>
  <p>I am the index.html</p>
</body>
</html>

我把favicon.ico放在了/public目录下。祝你好运。

编辑

已使用 Chrome 浏览器版本 47.0.2526.111 m

进行测试

节点 v4.2.4

没有图标请求

no request for favicon

html

node.js

favicon