Браузер иногда не запрашивает изображения с моего Node-сервера

У меня работает сервер Node. Я регистрирую каждый запрос, который получает сервер. Когда я набираю URL в моем браузере, я вижу некоторые странные поведения.

Иногда все файлы загружаются, и страница загружается просто отлично. В других случаях запрашиваются только текстовые файлы ( .jsи .cssт. Д.), А медиа-файлы ( .jpeg, .png) никогда не запрашиваются с моего сервера.

Что может заставить браузер время от времени запрашивать медиа-файлы, но часть времени игнорировать их?

Это не проблема, это ожидаемое поведение. Современные браузеры очень агрессивны в том, как они кэшируют изображения. А в случае Chrome он будет сохранять содержимое веб-страницы - изображения и внешние файлы - до истечения срока действия кэша или его очистки вручную.

Кэширование контента в Chrome.

Чтобы увидеть это поведение в действии, загрузите свою страницу в Chrome и следите за журналами вашего Node-приложения. Теперь, после загрузки страницы, откройте ее в веб-инспекторе в Chrome, щелкнув правой кнопкой мыши и нажав «Проверить», и перейдите на вкладку «Сеть». Смотрите скриншот ниже для справки. Один из параметров на вкладке «Сеть» помечен как «Отключить кэш».

Если вы установите этот флажок, а затем перезагрузите страницу, в журналах теперь должны отображаться все элементы страницы, которые будут перезагружены. Эта опция в инспекторе является инструментом веб-разработчика для случаев, когда кэширование мешает больше, чем помогает. FWIW, подобная опция существует в Safari.

Заголовки контроля кэша веб-сервера.

Другой вариант - посмотреть, какие заголовки отправляет ваш веб-сервер, используя curl -Iопцию из командной строки. Просто получите URL-адрес изображения или элемента с веб-страницы и просмотрите заголовки с помощью curl -Iпараметра из командной строки.

Например, допустим, у вас есть изображение с именем test.pngна сервере, который example.comвы можете запустить с помощью этой команды, чтобы просмотреть заголовки, которые отправляет веб-сервер, когда он обрабатывает запрос test.png:

curl -I http://example.com/test.png

Или - чтобы увидеть реальные заголовки - давайте проверим заголовки, которые отправляются при доступе к логотипу Google с помощью этого метода:

curl -I curl -I https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

Возвращаемые заголовки, которые я вижу:

HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Type: image/png
Content-Length: 13504
Date: Mon, 01 Jan 2018 02:59:24 GMT
Expires: Mon, 01 Jan 2018 02:59:24 GMT
Cache-Control: private, max-age=31536000
Last-Modified: Thu, 08 Dec 2016 01:00:57 GMT
X-Content-Type-Options: nosniff
Server: sffe
X-XSS-Protection: 1; mode=block
Alt-Svc: hq=":443"; ma=2592000; quic=51303431; quic=51303339; quic=51303338; quic=51303337; quic=51303335,quic=":443"; ma=2592000; v="41,39,38,37,35"

Обратите внимание, что Cache-Controlзаголовок и его max-ageзначение 31536000. Вы знаете, что это означает 31536000? Это число в секундах, и это эквивалентно 1 году. Так что серверы Google говорят, что мы должны браузер кэшировать это изображение в течение 1 года, прежде чем проверять новое.

Я предполагаю, что любое приложение Node, которое вы запускаете, также должно иметь какую-то похожую Cache-Controlнастройку, и если вы хотите видеть более частые загрузки контента, вы должны уменьшить эту Cache-Controlнастройку. Но обычно это следует делать только для целей разработки и тестирования; для производственного сервера использование кэша браузера - отличная вещь. И получение правильного баланса для потребностей приложения - наука внутри себя.