Шрифт из источника заблокирован для загрузки политикой общего доступа к ресурсам

Я получаю следующую ошибку в нескольких браузерах Chrome, но не во всех. Не совсем уверен, в чем проблема на данный момент.

Шрифт из источника « https://ABCDEFG.cloudfront.net » заблокирован для загрузки политикой общего доступа к ресурсам разных источников: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Поэтому происхождение « https://sub.domain.com » не разрешено.

У меня есть следующая конфигурация CORS на S3

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Запрос

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

Все остальные запросы из Cloudfront / S3 работают правильно, включая файлы JS.

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

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

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

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

В Chrome с ~ сентября / октября 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 (кросс-исходный общий доступ к ресурсам) и междоменная загрузка шрифтов Firefox для получения подробной информации о Amazon S3 CORS.

В целом, потому что это относится только к Firefox, поэтому может помочь в поиске Firefox, а не Chrome.

Я смог решить эту проблему, просто добавив <AllowedMethod>HEAD</AllowedMethod>в политику CORS S3 Bucket.

Пример:

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

Nginx:

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

AWS S3:

1. Выберите свое ведро
2. Нажмите свойства в правом верхнем углу
3. Permisions => Редактировать конфигурацию Cors => Сохранить
4. Сохранить

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

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

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

<AllowedOrigin>*</AllowedOrigin>

В CloudFront -> Распределение -> Поведения для этого источника используйте параметр «Прямые заголовки: белый список» и белый список заголовка «Источник».

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

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

Единственное, что сработало для меня (вероятно, потому что у меня были несоответствия с использованием 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

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

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

Краткая версия этого:

1. Отредактируйте конфигурацию S3 CORS (мой пример кода не отображался должным образом).
   Примечание. Это уже было сделано в исходном вопросе.
   Примечание. Предоставленный код не очень безопасен, более подробную информацию см. На связанной странице.
2. Перейдите на вкладку «Поведения» своего дистрибутива и нажмите, чтобы изменить
3. Измените «Прямые заголовки» с «Нет (улучшает кэширование)» на «Белый список».
4. Добавить «Происхождение» в список «Белые списки»
5. Сохраните изменения

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

Для тех, кто использует продукты 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");

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

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

Обратите внимание, что некоторые примеры используют, connectHandlersно это только устанавливает заголовки в документе. Использование rawConnectHandlersотносится ко всем активам (fonts / 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();
  });

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

Просто добавьте использование origin в вашем, если вы используете node.js в качестве сервера ...

как это

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

Нам нужен ответ для происхождения

Рабочее решение для Heroku здесь http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (цитаты следуют):

Ниже точно, что вы можете сделать, если вы запускаете приложение Rails в Heroku и используете Cloudfront в качестве CDN. Он был протестирован на Ruby 2.1 + Rails 4, стек Heroku Cedar.

Добавьте HTTP-заголовки CORS (Access-Control- *) к ресурсам шрифта.

• Добавьте драгоценный камень font_assetsв Gemfile.
• bundle install
• Добавить config.font_assets.origin = '*'в config/application.rb. Если вы хотите более детальный контроль, вы можете добавить разные значения источника в разные среды, например,config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• Нажмите код для Heroku.

Настройте Cloudfront для пересылки HTTP-заголовков CORS

В Cloudfront выберите свой дистрибутив, на вкладке «поведение» выберите и отредактируйте запись, которая контролирует доставку ваших шрифтов (для большинства простых приложений Rails у вас есть только 1 запись здесь). Измените заголовки пересылки с «Нет» на «Пока». И добавьте следующие заголовки в белый список:

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

Сохраните это и все!

Предупреждение: я обнаружил, что иногда Firefox не обновляет шрифты, даже если ошибка CORS исчезла. В этом случае продолжайте обновлять страницу несколько раз, чтобы убедить Firefox, что вы действительно полны решимости.