no request for favicon

Question

Я пишу простой файловый сервер node.js, используя http-модуль узла (я не использую 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) 

Должен ли я использовать поток чтения? Является ли кодирование двоичным или utf-8 или что-то еще?

Answer 1

Я играл вокруг с кодом репо и сделал некоторые изменения, чтобы увидеть, могу ли я служить favicon или нет. Я узнал некоторые странные вещи:

• favicon Порция является сложным и загадочным (моя точка зрения)
• Chrome используется, чтобы иметь ошибку или все еще может иметь отношение к фавиконки (Google, пожалуйста, есть много результатов)
• Похоже браузер кэширует favicon, обновить силы и различные методы, используемые, чтобы сделать браузер получить новые/обновленные favicon, см here
• я обнаружил, что когда Chrome браузер служил фавиконки то в последующем запросе, нет больше запрос favicon. Пока вы не измените hreffavicon в своем html файле и заставите браузер сделать новый запрос.

Я скопировал бит/фрагменты вашего кода, чтобы воспроизвести проблему и получил ее работу. Я решил подать favicon по-разному, см. Ниже:

сервер.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 взяты из here) отображается в браузере смотрите ниже:

После того, как выше favicon был показан, любой последующий http://192.1668.18:8080 не запросил запрос на favicon, но отобразил в терминале nodejs следующий запрос:

GET request for/

Аналогично нет favicon связанный запрос в браузере вкладки инструментов разработчика.

На этом этапе я предположил, что браузер кэшировал его и не запрашивает вообще, поскольку он уже имеет его. Поэтому я искал Google и наткнулся на это SO question, чтобы принудительно обновить запрос favicon. Итак, давайте изменим favicon HREF в index.html (и 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 и поставить новый. Я добавил this обновил server.js и обновил браузер. Удивительно, что консольный журнал в nodejs (для нового favicon) не запрашивается в браузере средствам разработчика newtork console (поэтому тогда кэшировалось значение).

Чтобы заставить браузер, чтобы получить новый 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 

Ваш вопрос может быть связан с

1. Browser уже в кэше Favicon, следовательно, не требует его
2. Вы не используете иконку правильно на сервере.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 под/общедоступным каталогом. Удачи.

EDIT

Испытано с Chrome Browser Версия 47.0.2526.111 м

Узел v4.2.4

Answer 2

Браузер делает запрос к favicon.ico сам, автоматически, при загрузке страницы. Этот код, который end ВЛЯЕТСЯ res Понс, получит запрос FavIcon:

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

Как вы можете видеть в журнале запустить его:

GET/
GET /favicon.ico