添加书签后 Nuxtjs Favicons 在 iOS Safari 上不显示

Question

我对使用 Nginx 反向代理的 Nuxtjs+express 有一个问题，当 bookmark/favorite 只显示网站标题的第一个字母时，iOS Safari 上没有显示网站图标。我所有的图标都来自静态目录并在 safari macOS 和所有其他 browsers/platforms 上工作，我还有一个具有相同配置的其他应用程序面临这个问题。

通常我使用 https://realfavicongenerator.net/ 生成我所有的网站图标，我检查了我的网站，所有结果都是绿色的。我尝试了以下但没有运气：-

在 CDN 服务器上托管网站图标。
安装@nuxt/pwa生成所有图标。
尝试了其他网站的虚拟图标
在多个 iOS 设备上测试 iPad 和 iPhone 清除了缓存，还尝试了 saucelabs.com
检查了 nginx access.log 和 error.log 并重新启动服务器
重启 PM2
检查文件夹和文件权限
在同一台服务器上创建了虚拟网站，但没有 Nuxt，一切都按预期工作

nuxt.config.js 头部选项

  head: {
   ...
    link: [
      {
        rel: "canonical",
        hid: "canonical",
        href: process.env.APP_URL
      },
      {
        rel: "apple-touch-icon",
        sizes: "180x180",
        href: "/apple-touch-icon.png?v=GvmpJqoA5j"
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "32x32",
        href: "/favicon-32x32.png?v=GvmpJqoA5j"
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "192x192",
        href: "/android-chrome-192x192.png?v=GvmpJqoA5j"
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "16x16",
        href: "/favicon-16x16.png?v=GvmpJqoA5j"
      },
      {
        rel: "manifest",
        href: "/site.webmanifest?v=GvmpJqoA5j"
      },
      {
        rel: "mask-icon",
        href: "/safari-pinned-tab.svg?v=GvmpJqoA5j",
        color: "#611e75"
      },
      {
        rel: "shortcut icon",
        href: "/favicon.ico?v=GvmpJqoA5j",
        type: "image/x-icon"
      },
      {
        rel: "icon",
        href: "/favicon.ico?v=GvmpJqoA5j",
        type: "image/x-icon"
      }
    ],
  ...
  },

nginx

map $sent_http_content_type $expires {
  "text/html"                 epoch;
  "text/html; charset=utf-8"  epoch;
   default                     off; # set this to your needs
}

server {
    listen 80;
    listen [::]:80;
    server_name www.example.com;
    return 301 https://www.example.fm$request_uri;

}


server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    server_name www.example.com;
    rewrite ^/(.*)/$ / permanent;

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;
    ########### tried to disable below block
add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-XSS-Protection "1; mode=block" always;
        add_header X-Content-Type-Options "nosniff" always;
       add_header Referrer-Policy "no-referrer-when-downgrade" always;
       add_header Content-Security-Policy "default-src * data: 'unsafe- 
 eval' 'unsafe-inline'" always;

   # Simple requests
    if ($request_method ~* "(GET|POST)") {
      add_header "Access-Control-Allow-Origin"  *;
    }

    # Preflighted requests
    if ($request_method = OPTIONS ) {
      add_header "Access-Control-Allow-Origin"  *;
      add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";

    add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept,x-key";
      return 200;
    }
    proxy_hide_header X-Powered-By;
        proxy_cache_bypass $http_upgrade;

        proxy_redirect                      off;
        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  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass   http://127.0.0.1:8003;   
    }
}

当转到 https://www.example.com/favicon.ico.

时，所有网站图标都可以毫无问题地访问

任何帮助将不胜感激

Answer 1

通过将以下块添加到 nginx 配置文件，解决了 Safari iOS 上的问题。


  location ~ \.(ico|png|jpg|jpeg|woff) {
        root /var/www/example.com/static;
        add_header Cache-Control 'public, must-revalidate, proxy-revalidate, max-age=31557600';
        access_log off;
        proxy_redirect                      off;
        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  $scheme;
}

我不知道是什么导致了这个问题，因为它在其他 browsers/platforms 上运行良好，希望它能帮助面临同样问题的人。

添加书签后 Nuxtjs Favicons 在 iOS Safari 上不显示

Nuxtjs Favicons not showing on iOS Safari when bookmarked

express

nginx

reverse-proxy

nuxt.js

favicon