没有要求图标
mat*_*vio 8 html favicon node.js
我正在使用节点的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或其他？
我玩你的回购代码并进行了一些更改,看看我是否可以为我服务favicon.我发现了一些奇怪的东西:
favicon服务是棘手和神秘的(我的观点)- Chrome曾经有过一个错误,或者可能仍然与favicon有关(谷歌请,有很多结果)
- 看起来像浏览器缓存
favicon,强制刷新和用于使浏览器获取新/更新的不同方法favicon,请参见此处 - 我发现,一旦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(从这里取出的微小车辆.ico )如下所示:
favicon显示上述内容后,任何后续http://192.1668.18:8080产生的请求都没有,favicon但只在nodejs的终端显示以下请求
GET request for /
同样favicon,浏览器开发人员工具网络选项卡中没有相关请求
此时,我认为浏览器已缓存它并且根本没有请求,因为它已经拥有它.所以我用谷歌搜索并遇到了这个问题,以强制刷新favicon请求.所以,让我们改变(和)中的faviconhref并重试index.htmlserver.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并换上新的.我添加了这个更新了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
您的问题可能与此有关
- 浏览器已经有一个缓存的图标,因此不会请求它
- 您没有在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 m进行测试
节点v4.2.4
| 归档时间： |
|
| 查看次数： |
3547 次 |
| 最近记录： |