没有favicon的请求

2018-07-02 05:49:35

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

我注意到我的初始GET请求正在触发，并且所有后续的GET请求正在为css和javascript进行; 但是，我没有收到对favicon的请求。即使我看着页面检查员，我也没有任何错误，并且favicon没有显示在资源中。

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)

我应该不使用readstream吗？是编码二进制还是utf-8或其他？

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

favicon服务是棘手而神秘的（我的观点）

Chrome曾经有一个bug或可能仍然与favicon有关（请Google，有很多结果）

看起来像浏览器缓存favicon ，强制刷新和不同的方法，使浏览器获得新的/更新的favicon ，看到这里

我发现一旦Chrome浏览器在随后的请求中提供了favicon，就没有更多的favicon请求。直到你改变html文件中的favicon的href ，并强制浏览器发出新的请求。

我复制了一些代码来重现问题并使其工作。我决定以不同的方式服务于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 （从这里获取的小型车辆）

在这里输入图像描述

在显示上面的收藏夹favicon后，任何后续的http://192.1668.18:8080不会生成收藏夹favicon请求，但仅在nodejs的终端中显示以下请求

GET request for /

同样，浏览器开发者工具网络标签中也没有favicon相关的请求。

此时，我认为浏览器缓存了它，并且根本没有请求，因为它已经拥有了它。所以我GOOGLE了，并遇到这个问题，以强制刷新favicon请求。因此，让我们改变index.html （和server.js ）中的favicon href server.js试

<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并换上新favicon 。我添加了这个更新了server.js并刷新了浏览器。令人惊讶的是没有控制台登录nodejs（对于新的favicon ），浏览器开发工具newtork控制台没有请求（所以提供了缓存值）。

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

<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

在这里输入图像描述

您的问题可能与此有关

浏览器已经有一个缓存的favicon，因此，不要求它

您在server.js中没有正确地提供favicon

别的东西

如果你想测试我的代码，请随意，这里是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米进行测试

节点v4.2.4

当页面加载时，浏览器会自动向favicon.ico本身发出请求。这个代码，其中end S中的res ponse，将收到的favicon请求：

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

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

GET /
GET /favicon.ico

链接地址: http://www.djcxy.com/p/89881.html

上一篇: no request for favicon

下一篇: How to convert Indic Characters to Unicode Escaped characters