it-roy-ru.com

Font Awesome значки, не отображаемые в Chrome, проблема политики общего доступа к ресурсам, связанная с MaxCDN

только что заметил на нескольких веб-сайтах, что в Google Chrome отображаются отличные иконки шрифтов. Консоль показывает следующую ошибку: 

Шрифт из источника ' http://cdn.keywest.life ' заблокирован из загрузка по политике общего доступа к ресурсам: нет Заголовок «Access-Control-Allow-Origin» присутствует в запрашиваемом ресурс. Происхождение ' http://www.keywest.life ' поэтому не является разрешенный доступ.

Я обнаружил точно такую ​​же проблему на нескольких других сайтах. Это можно легко исправить, заменив собственную ссылку на CDN на:

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

Однако, это не решение, а просто обходной путь. Я хотел бы знать причину и правильное решение.

(причина в том, что веб-сайт использует свой собственный CDN, предоставленный MaxCDN, и содержит ссылку на шрифты удивительных шрифтов, которые не загружаются Chrome, если вы загружаете тот же ресурс из ресурса Bootstrapcdn, упомянутого выше, работает)

вот пример проблемы (в меню и значках социальных сетей в нижнем колонтитуле: http://www.keywestnight.com/fantasy-fest )

Спасибо за любую помощь/объяснение!

31
Yatko

Вот рабочий метод, чтобы разрешить доступ со всех доменов для веб-шрифтов :

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>
78
Yatko

Проблема не в файле CSS, а в том, как файл шрифта обслуживается. Файл font-awesome.min.css имеет такие строки

@font-face{font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0')
format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') 
format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') 
format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal}

что заставляет браузер запрашивать соответствующий файл шрифта (eot, woff, ttf или svg) с того же сервера, что и файл CSS. Это логично и правильно.

Однако, когда браузер запрашивает этот файл шрифта из cdn.keywest.life, он читает заголовки для заголовка Access-Control-Allow-Origin и не находит их, поэтому выдает это сообщение об ошибке. (Это похоже на ошибку браузера, потому что она поступает с того же сервера, что и файл CSS).

Вместо этого, когда вы используете maxcdn.bootstrapcdn.com, ответ включает заголовок Access-Control-Allow-Origin:*, и браузер принимает этот файл шрифта. Если ваш cdn сервер включает этот заголовок, он тоже будет работать.

Если у вас есть сервер Apache, посмотрите этот ответ: Font-awesome неправильно отображается в Firefox/как продавать через CDN?

17
Brent Washburne

Я использую CDN, который не позволяет мне изменять его ответ, поэтому я изменил font-awesome.min.css, заменив относительный путь абсолютным путем, и это сработало.

2
laike9m

Ни один из ответов не сработал для меня, мне пришлось создать правило Edge в бэк-офисе maxcnd (которое изменяет конфигурационный файл в вашей зоне)

Больше информации здесь

https://www.maxcdn.com/one/tutorial/Edge-rules-recipes/https://www.maxcdn.com/one/tutorial/create-a-rule/

2
Ka.

Эта проблема доступа к ресурсам с потрясающими шрифтами была проблемой для многих людей без всестороннего объяснения и решения проблемы.

Что такое CORS:

Обмен ресурсами между источниками (CORS) - это механизм, который использует дополнительные заголовки HTTP, чтобы позволить пользовательскому агенту получить разрешение на доступ к выбранным ресурсам с сервера в другом источнике (домене), чем сайт, который используется в настоящее время. Пользовательский агент выполняет перекрестный HTTP-запрос, когда запрашивает ресурс из домена, протокола или порта, отличного от того, из которого был получен текущий документ.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Эта проблема:

Проблема связана с тем, как загружаются шрифт-офигенные шрифты.

@font-face{
    font-family:'FontAwesome';
    src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
    src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal
}

Шрифты загружаются через таблицу стилей (CSS). Ситуация, которую мы имеем здесь:

 Web assets access

Решение:

Хотя в вашем хранилище файлов созданы правила CORS, например, S3, и доступ к ресурсу был предоставлен соответствующему домену, когда CDN пытается загрузить шрифты, указанные в CSS. Источник/домен, указанный при загрузке этих шрифтов, принадлежит CDN, но доступ к CDN не предоставлен CORS. домен.

Создайте правило CORS для домена CDN.

1
avantprime