Question

我正在使用节点的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)

我不应该使用读取流吗？是编码二进制还是utf-8或其他什么？

Answer 1

我玩了你的回购代码并进行了一些更改，看看我是否可以为favicon提供服务。我发现了一些奇怪的东西：

favicon服务是棘手和神秘的（我的观点）
Chrome曾经有过一个错误或者可能仍然与favicon有关（谷歌请，有很多结果）
看起来像浏览器缓存favicon，强制刷新以及用于使浏览器获取新的/更新favicon的不同方法，请参阅here
我发现，一旦Chrome浏览器提供了favicon，那么在后续请求中，就没有更多的favicon请求了。直到您更改href文件中favicon的{{1}}并强制浏览器发出新请求。

我复制了一些代码/部分代码以重现问题并使其正常工作。我决定以不同的方式提供html，见下文：

<强> server.js

favicon

<强>的index.html

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

<link rel="shortcut icon" type="image/x-icon" href="/requestFavicon"/>并使用Chrome浏览器进行nodemon server.js请求。 http://192.168.1.18:8080显示以下内容：

terminal

浏览器中显示的GET request for / GET request for /requestFavicon（来自here的微小车辆.ico）见下文：

显示上述favicon.ico后，任何后续favicon都没有发出http://192.1668.18:8080请求，但只在nodejs的终端显示以下请求

favicon

在浏览器开发者工具网络标签中同样没有GET request for /相关请求。

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

server.js

现在重试访问<link rel="shortcut icon" type="image/x-icon" href="/updatedRequestFavicon"/>并关注nodejs终端以及chrome开发者控制台，我得到以下内容：

http://192.168.1.18:8080

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

要强制浏览器获取新的favicon，我想更改favicon中href的{{1}}并更新favicon href然后看看brwoser是否被迫请求更新的favicon或继续使用缓存的favicon。

index.html

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

server.js

您的问题可能与

有关

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

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

<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');
 }

这是 index.html

GET request for /
GET request for /NewFavicon

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

修改

使用Chrome浏览器版本47.0.2526.111 m
进行测试
节点v4.2.4

Answer 2

浏览器会在加载页面时自动向请求此代码favicon.ico是end ponse，收到favicon请求：

res

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

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

没有要求图标

2 个答案: