个人中心
gpt4 book ai didi

html - 没有图标请求

转载 作者：太空狗 更新时间：2023-10-29 14:12:46 27 4
gpt4 key购买 nike

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

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

以防万一它与问题相关。我正在使用 Node 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还是别的？

最佳答案

我试用了您的 repo 代码并做了一些更改以查看我是否可以提供我的 favicon或不。我发现了一些奇怪的东西:

  • favicon服务是棘手和神秘的(我的观点)
  • Chrome 曾经有一个错误，或者可能仍然有与 favicon 相关的错误(请谷歌，有很多结果)
  • 似乎是浏览器缓存 favicon 、强制刷新和用于使浏览器获得新/更新的不同方法 favicon , 请参阅 here
  • 我发现一旦 Chrome 浏览器提供了 favicon，那么在随后的请求中，就没有更多的 favicon 请求了。除非您更改 href的 favicon在你的html文件并强制浏览器发出新请求。

我复制了您的代码片段以重现问题并使其正常运行。我决定服务 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)在浏览器中显示如下:

enter image description here

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

GET request for /

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

此时，我假设浏览器缓存了它，根本不请求，因为它已经有了。所以我用谷歌搜索并发现了这个 SO question强制刷新图标请求。所以，让我们改变 favicon index.html 中的 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

enter image description here

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

强制浏览器获取新的favicon , 我想改变 href的 favicon在index.html并更新 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

enter image description here

您的问题可能与

有关
  1. 浏览器已经有一个缓存的图标，因此不请求它
  2. 您没有在 server.js 中正确提供网站图标
  3. 其他

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

Node v4.2.4

关于html - 没有图标请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34918906/

27 4 0
文章推荐： git - "git push origin HEAD:clean_up"和没有 HEAD 有什么区别？
文章推荐： android - 构建特定版本的 cyanogenmod(即 9.0.0-galaxys2)
文章推荐： Git:大项目开发流程的最佳实践
文章推荐： c# - GIT:修改文件并以相同的日期/时间提交
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com