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


159

Я получаю следующую ошибку в нескольких браузерах 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.


5
У меня та же проблема ... Я начал замечать это после обновления до хрома 37.0.2062.94
kirley

После обновления конфигурации CORS я переименовал ресурсы и смог заставить их работать. Так что либо 1) Конфигурация CORS применяется только при создании файла (но не при обновлении) ИЛИ 2) Конфигурация CORS кэшируется в Cloudfront. Я опубликую это как ответ, если другие могут подтвердить, что это работает и для них.
Даллас Кларк

1
Только что заметил это с Chrome v. 37.0.2062.94, но не с более ранней версией. У меня вообще нет конфигурации CORS на S3, так что этого не должно быть, верно?
Ghopper21

1
@ Ghopper21 вам нужна правильная конфигурация CORS. Попробуйте в Firefox, и это даст вам (вероятно) тот же результат.
Тим Диггинс

1
@RichPeck - исправьте, добавив правильную конфигурацию CORS в S3 (или, если вы автоматически создаете свой CDN из исходного кода, это немного сложнее - вам нужно добавить соответствующие заголовки, а затем аннулировать ваши кэшированные шрифты) ... stackoverflow.com / questions / 12229844 /… см. ответ ниже для получения более подробной информации
Тим Диггинс

Ответы:


87

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

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

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

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

1
Привет, в чем разница Header set Access-Control-Allow-Origin "*"? Спасибо
NineCattoRules

8
для пользователей Windows установите <add name = "Access-Control-Allow-Origin" value = "*" /> в <customHeaders> в файле web.config. Хорошего дня
Арсалан Салим

2
@ Единственное отличие состоит в том, что с помощью «add» заголовок ответа добавляется к существующему набору заголовков, даже если этот заголовок уже существует. Это может привести к тому, что два (или более) заголовка будут иметь одинаковые имена; тогда как с помощью "set" устанавливается заголовок ответа, заменяя любой предыдущий заголовок этим именем. В этом случае одна и та же причина * включает их всех.
Джованни Ди Грегорио,

@GiovanniDiGregorio Спасибо за приятную информацию!
NineCattoRules

21
Просто отметить, что Access-Control-Allow-Origin "*"это потенциально небезопасно, так как открывает домен для доступа к javascript из любого домена. Вместо этого следует использовать конкретное значение домена, например, Access-Control-Allow-Origin "http://example1.com"см. Также stackoverflow.com/a/10636765/583715 для хорошего объяснения.
Дэвид Томас

59

В 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.


Спасибо за этот ответ, похоже, это может быть проблемой для многих других. Хотя моя проблема возникала в стабильной сборке Chrome.
Даллас Кларк

45
Это происходит в Chrome сейчас.
Джастингордон

Поскольку люди продолжают ссылаться (включая меня!) На этот ответ, я сделал его менее историческим и более актуальным до сегодняшнего дня.
Тим Диггинс

1
Также FYI я обнаружил , что сообщение об ошибке «заблокировано нагружении политики Cross-Origin совместного использования ресурсов: Нет.„Access-Control-Allow-Origin“заголовок присутствует на запрошенный ресурс Origin» был на самом деле делать с с плохой путь к файлу шрифта на моем исходном сервере, а затем cloudfront перенаправляет на домашнюю страницу моего сервера (и ответ перенаправления или домашняя страница не имеют заголовков CORS). Смущает, но решается путем использования правильного пути к файлу фактического шрифта (строго говоря, не проблема CORS).
Тим Диггинс

Привет @DallasClark, вы можете выбрать приемлемый ответ на ваш вопрос. Спасибо Тим, ваши ссылки и объяснения были полезны в моем опыте. Приветствия.
Дан

46

Я смог решить эту проблему, просто добавив <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>

хотя не уверен насчет безопасности, было бы неплохо, если бы кто-то
Эзер С.

Нужно ли время для этого изменения? Я только добавил <AllowedMethod>HEAD</AllowedMethod>к своей политике CORS на ведре, и это все еще не работает.
Сальваторе Йовене

обычно нет, это должно занять макс. пару минут
Эзер С.

30

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/


после добавления получим 404 не найден.
neobie

12

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

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

<AllowedOrigin>*</AllowedOrigin>

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

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

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


1
Это не похоже на работу, у вас есть больше деталей? Я включил это, но у меня все та же проблема.
Джако Преториус

7

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


1
Потрясающие! Большое спасибо!
Rotimi

1
Поскольку ваш код был подробным, мне потребовалось некоторое время, чтобы пройти через него, но я кое-что узнал. Я применил часть этого, чтобы настроить мое решение. Это сработало.
Мохаммед Мойнуддин Васим

3

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

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

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

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

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


2

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

Заслуживает голоса, чтобы помнить нас пользователей Windows.
mohrtan

Я использую ядро ​​asp.net, как мне добавить это в файл appsettings.json?
Юсуфф Содик

1

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

Настройка этого в 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();
  });

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


0

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

как это

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

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


-5

Рабочее решение для 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, что вы действительно полны решимости.


4
Пожалуйста, избегайте только ссылок. Будет полезно, если вы сможете скопировать соответствующие фрагменты из связанной статьи в свой ответ. Спасибо.
bPratik
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.