Шрифт Удивительные значки, которые не отображаются в Chrome, связанные с MaxCDN, связанные с перекрестными источниками ресурсов

только что заметил на нескольких веб-сайтах, что шрифт 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)

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

Ответ 1

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

# 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>

Ответ 2

Проблема заключается не в файле 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?

Ответ 3

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

Подробнее здесь

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

Ответ 4

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

Ответ 5

Я решил эту проблему, удалив <base href="http://domain.com/" /> из заголовка.

Ответ 6

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

Что такое 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.