только что заметил на нескольких веб-сайтах, что шрифт awesome icons не отображается в Google Chrome. На консоли отображается следующая ошибка:
Шрифт из источника 'http://cdn.keywest.life' заблокирован загрузка по политике совместного использования ресурсов Cross-Origin: Нет Заголовок заголовка Access-Control-Allow-Origin присутствует в запрошенном ресурс. 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)
Спасибо за любую помощь/объяснение!
Вот рабочий метод разрешить доступ ко всем доменам для веб-сайтов:
# 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, см. этот ответ: Шрифт-awesome не отображается должным образом в Firefox/как продавать через CDN?
Ни один из ответов не работал у меня, мне нужно было создать правило края в бэк-офисе maxcnd (который меняет конфигурационный файл в вашей зоне)
Подробнее здесь
https://www.maxcdn.com/one/tutorial/edge-rules-recipes/ https://www.maxcdn.com/one/tutorial/create-a-rule/
Я использую CDN, который не позволяет мне изменять его ответ, поэтому я изменил font-awesome.min.css, заменив относительный путь на абсолютный путь, и он сработал.
Я решил эту проблему, удалив <base href="http://domain.com/" /> из заголовка.
Эта проблема доступа к шрифтам - удивительные активы была проблемой для многих людей без исчерпывающего объяснения и разрешения проблемы.
Что такое 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.