Nuxtjs Favicons не отображаются в iOS Safari при добавлении в закладки - PullRequest
Новая
       45

Nuxtjs Favicons не отображаются в iOS Safari при добавлении в закладки

0 голосов
/ 25 мая 2019

У меня проблема с Nuxtjs + express, использующим обратный прокси-сервер Nginx, из-за того, что в iOS Safari не отображаются значки избранного, когда в закладке / избранном отображается только первая буква из заголовка веб-сайта.все мои значки работали из статического каталога и работали на Safari MacOS и всех других браузерах / платформах, также у меня есть другое приложение с такой же конфигурацией, которое сталкивается с проблемой.

обычно я генерирую все свои значки избранного с использованием https://realfavicongenerator.net/, и я проверил свой веб-сайт, и все результаты отображаются зеленым цветом.Я пробовал следующее, но не повезло: -

  1. значки хоста на сервере CDN.
  2. install @ nuxt / pwa для генерации всех значков.
  3. пробовалфиктивные значки с других сайтов
  4. протестированы на нескольких устройствах iOS iPad и iPhone очистили кеш, также пробовали эмуляторы, такие как saucelabs.com
  5. проверили nginx access.log и error.log и перезагрузили сервер
  6. перезагрузить PM2
  7. проверить права доступа к папкам и файлам
  8. создал фиктивный веб-сайт на том же сервере, но без 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.

, любая помощь будет оценена

1 Ответ

0 голосов
/ 25 мая 2019

Исправлена ​​проблема в Safari iOS путем добавления приведенного ниже блока в файл конфигурации nginx. 


  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;
}

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

...