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)
Спасибо за любую помощь / объяснение!
7 ответов
Вот рабочий метод, чтобы разрешить доступ со всех доменов для веб-шрифтов:
# 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>
Проблема не в файле 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?
Эта проблема доступа к шрифт-удивительным ресурсам была проблемой для многих людей без всестороннего объяснения и решения этой проблемы.
Что такое 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). Ситуация, которую мы имеем здесь:
Решение:
В то время как правила CORS были созданы в вашем файловом хранилище, например, S3, и доступ к ресурсу был предоставлен соответствующему домену, когда CDN пытается загрузить шрифты, указанные в CSS, источник / домен, указанный при загрузке этих шрифтов, является CDN, но нет доступа CORS к домену CDN.
Создайте правило CORS для домена CDN.
Я использую CDN, который не позволяет мне изменять его ответ, поэтому я изменил font-awesome.min.css, заменив относительный путь абсолютным путем, и это сработало.
Ни один из ответов не сработал для меня, мне пришлось создать пограничное правило в бэк-офисе maxcnd (которое меняет конфигурационный файл в вашей зоне)
Больше информации здесь
https://www.maxcdn.com/one/tutorial/edge-rules-recipes/ https://www.maxcdn.com/one/tutorial/create-a-rule/
Решение - использовать другой cdn для fontawesome.
Если вы похожи на меня и используете официальный плагин WordPress Font Awesome, вам нужно зайти в настройки и переключиться с «Использовать CDN» на «Использовать комплект».