當Nginx反向代理到Node.js時，Safari中的Lazyload無法正常工作

Question

問題出在這里：我有一個位於Nginx代理后面的node.js服務器。 Nginx被配置為提供靜態內容，並將proxy_pass傳遞給node.js。此外，在節點應用程序中，圖像是通過惰性加載解決方案加載的。

在Chrome瀏覽器中，當我訪問我的應用程序（example.com）時，一切正常。 lazyload可以正常工作，圖像由nginx加載並提供服務。

在Safari中，我的應用程序（example.com）可以正常加載（這意味着node.js服務器和nginx代理可以正常工作）。 但是圖像未加載！ 它表明來自lazyload的請求未發送或未獲得任何響應。

如果我直接在Safari中輸入圖片的uri，則可以正常加載。

我應該提到，當我在本地使用node.js服務器（不使用nginx）時，即使在Safari中也沒有問題。

因此，由於Chrome一切正常，因此lazyload，Nginx，Node.js和Safari之間似乎存在問題。

在下面找到我的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 {
        }
    }

Answer 1

如果您還使用X-Forwarded-Proto我會先嘗試將其刪除

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';

這使您可以在下游使用純http時終止與代理的SSL，因此您無需升級連接。

Answer 2

我自己才找到問題的答案。 我在這里發布，以免對其他人有幫助。

我在Safari控制台中注意到，由於其uri以http而不是https（https上的不安全內容）開頭，因此它阻止了圖像的加載，因此未加載它們，但是Chrome顯示了https上的不安全內容，因此圖像已加載。 它只是在url字段旁邊顯示警告。

因此，它與node.js或nginx反向代理無關：)