Question

我在使用Nginx反向代理的Nuxtjs + express时遇到问题，当书签/收藏夹仅显示网站标题的首字母时，iOS Safari上不显示收藏夹图标。我所有的图标都从静态目录提供，并且可以在Safari MacOS和所有其他浏览器/平台上运行，而且我还有一个其他应用程序也面临着相同的配置。

通常，我使用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 ^/(.*)/$ /$1 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;
}

我首先不知道是什么引起了该问题，因为它在其他浏览器/平台上都可以正常运行，希望它能帮助遇到相同问题的人。

加入书签后，Nuxtjs Favicons不会显示在iOS Safari上

1 个答案: