Шрифт от источника был заблокирован от загрузки по политике совместного использования ресурсов Cross-Origin

Ответ 1

Добавьте это правило в свой .htaccess

Header add Access-Control-Allow-Origin "*" 

еще лучше, как было предложено @david thomas, вы можете использовать определенное значение домена, например.

Header add Access-Control-Allow-Origin "your-domain.com"

Ответ 2

Chrome с ~ Sep/Oct 2014 заставляет шрифты подвергаться тем же проверкам CORS, что Firefox сделал https://code.google.com/p/chromium/issues/detail?id=286681. Об этом говорится в https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Учитывая, что для шрифтов браузер может выполнить предполетную проверку, тогда ваша политика S3 также нуждается в заголовке запроса cors. Вы можете проверить свою страницу в Safari (который в настоящее время не выполняет проверку CORS для шрифтов), а Firefox (что делает), чтобы дважды проверить, что это проблема.

См. ответ на Amazon S3 CORS (совместное использование ресурсов Cross-Origin) и загрузку шрифтов между доменами Firefox для деталей Amazon S3 CORS.

NB вообще, потому что это применяется только для Firefox, поэтому это может помочь найти Firefox, а не Chrome.

Ответ 3

Nginx:

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3:

• Выберите свой ковш
• Нажмите свойства в верхней части страницы
• Разрешения = > Изменить конфигурацию Корса = > Сохранить
• Сохранить

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

Ответ 4

Мне удалось решить проблему, просто добавив <AllowedMethod>HEAD</AllowedMethod> в политику CORS для ведра S3.

Пример:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Ответ 5

26 июня 2014 года AWS выпустила правильное поведение Vary: Origin на CloudFront, так что теперь вы просто

Задайте конфигурацию CORS для вашего ведра S3:

<AllowedOrigin>*</AllowedOrigin>

В CloudFront → Distribution → Behaviors для этого источника используйте опцию Forward Headers: Whitelist и белый список заголовка Origin.

Подождите ~ 20 минут, в то время как CloudFront распространяет новое правило

Теперь ваш дистрибутив CloudFront должен кэшировать разные ответы (с соответствующими заголовками CORS) для разных заголовков заголовков клиента.

Ответ 6

Единственное, что сработало для меня (возможно, потому, что у меня были несоответствия с использованием www.):

Вставьте это в свой файл .htaccess:

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

Ответ 7

У меня была эта же проблема, и эта ссылка предоставила мне решение:

http://www.holovaty.com/writing/cors-ie-cloudfront/

Короткий вариант:

• Изменить конфигурацию S3 CORS (мой пример кода не отображается правильно)
  Примечание: это уже сделано в исходном вопросе
  Примечание: предоставленный код не очень безопасен, больше информации на связанной странице.
• Перейдите на вкладку "Поведение" вашего дистрибутива и нажмите, чтобы изменить
• Измените "Forward Headers" на "None (Улучшает кеширование)" на "Белый список".
• Добавить "Origin" в список "Список белых списков"
• Сохранить изменения

Ваш пакет облачного обновления будет обновляться, что занимает около 10 минут. После этого все должно быть хорошо, вы можете проверить, проверив, что сообщения об ошибках, связанные с CORS, исчезли из браузера.

Ответ 8

Существует хорошая запись здесь.

Конфигурирование этого в nginx/apache является ошибкой.
Если вы используете хостинговую компанию, вы не можете настроить ее.
Если вы используете Docker, приложение должно быть автономным.

Обратите внимание, что в некоторых примерах используется connectHandlers, но это только устанавливает заголовки в документе. Использование rawConnectHandlers применяется ко всем предоставленным активам (шрифты/css/etc).

  // HSTS only the document - don't function over http.  
  // Make sure you want this as it won't go away for 30 days.
  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); // 2592000s / 30 days
    next();
  });

  // CORS all assets served (fonts/etc)
  WebApp.rawConnectHandlers.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    return next();
  });

Это было бы подходящее время, чтобы посмотреть политику браузера, например, кадрирование и т.д.

Ответ 9

Для тех, кто использует продукты Microsoft с файлом web.config:

Объедините это с вашим web.config.

Чтобы разрешить на любом домене заменить value="domain" на value="*"

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="domain" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
</configuration>

Если у вас нет разрешения на редактирование web.config, добавьте эту строку в свой серверный код.

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

Ответ 10

Рабочее решение для heroku находится здесь http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html