Lazyload в Safari не работает, когда обратный прокси-сервер Nginx для node.js

Вот проблема: у меня есть сервер node.js, который находится за прокси-сервером Nginx. Nginx настроен на обслуживание статического содержимого и proxy_pass других в node.js. Кроме того, в приложении узла изображения загружаются с помощью решения отложенной загрузки.

В Chrome, когда я обращаюсь к своему приложению (example.com), все работает как надо. Ленивая загрузка работает нормально, изображения загружаются и обслуживаются nginx.

В Safari мое приложение (example.com) загружается нормально (это означает, что сервер node.js и прокси-сервер nginx работают). Но изображения не грузятся! Похоже, что запрос от lazyload не отправлен или не получил ответа.

Если я ввожу uri изображений непосредственно в Safari, они загружаются нормально.

Я должен упомянуть, что когда я локально использую сервер node.js (без nginx), проблем нет даже в Safari.

Итак, похоже, есть проблема между lazyload, Nginx, Node.js и Safari, так как в Chrome все в порядке.

Ниже вы найдете мой nginx.conf:

http {
   log_format  main  ‘$remote_addr - $remote_user [$time_local] “$request” ’
                     ‘$status $body_bytes_sent “$http_referer” ’
                     ‘“$http_user_agent” “$http_x_forwarded_for”’;
   access_log  /var/log/nginx/access.log  main;

   sendfile            on;
   tcp_nopush          on;
   tcp_nodelay         on;
   keepalive_timeout   65;
   types_hash_max_size 2048;

   include             /etc/nginx/mime.types;
   default_type        application/octet-stream;

   server {

    server_name  example.com www.example.com;

        access_log /var/log/nginx/example.com/nginx.access.log;
        error_log  /var/log/nginx/example.com/nginx.error.log;

    location /img/ {
       root          /var/nginx/html;
    }

    location / {

        proxy_pass http://127.0.0.1:3000; #nodejs server
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
     }

    error_page 404 /404.html;
            location = /40x.html {
        }

    error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

person Hassan    schedule 30.04.2018    source источник


Ответы (2)


Я бы сначала попробовал удалить их, если вы также используете X-Forwarded-Proto

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';

Это позволяет вам завершать SSL с прокси-сервером, говоря простым языком http вниз по течению, поэтому вам не нужно обновлять соединение.

person JP Silvashy    schedule 30.04.2018
comment
Tnx для ответа. Думаю, я не понял сути. Сервер nginx вынужден работать по https (ssl), но между nginx и node.js нет шифрования (http). В этом случае следует ли удалить proxy_set_header X-Forwarded-Proto https?? или я должен удалить настройки обновления? - person Hassan; 30.04.2018
comment
Я бы попробовал удалить строки, которые я перечислил, заголовки «Upgrade» и «Connection» и позволить nginx установить их автоматически. - person JP Silvashy; 30.04.2018

Только что сам нашел ответ на свой вопрос. Я публикую здесь, если это может быть полезно для других.

Я заметил в консоли Safari, что она блокирует загрузку изображений, поскольку их uri начинаются с http, а не с https (небезопасный контент через https), поэтому они не загружаются. Но Chrome показывает небезопасное содержимое через https, поэтому изображения загружаются. Он просто показывает предупреждение рядом с полем URL.

Таким образом, это не имеет ничего общего с обратным прокси-сервером node.js или nginx :)

person Hassan    schedule 30.04.2018