Шрифт з походження був заблокований під час завантаження політикою перехресного походження ресурсів

Я отримую таку помилку в декількох браузерах 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/isissue/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 Bucket 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>

Nginx:

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

AWS S3:

1. Виберіть відро
2. Клацніть властивості в правій верхній частині
3. Дозвіл => Змінити конфігурацію корів => Зберегти
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. Use):

Вставте це у свій .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_isissue_broken_web_fonts

У мене була ця сама проблема, і це посилання забезпечило для мене рішення:

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

Коротка його версія:

1. Редагувати конфігурацію CORS S3 (мій зразок коду не відображався належним чином)
   Примітка. Це вже зроблено в оригінальному запитанні
   Примітка: наданий код не дуже захищений, більше інформації на пов’язаній сторінці.
2. Перейдіть на вкладку "Поведінки" вашого розповсюдження та натисніть для редагування
3. Змініть "Заголовки вперед" з "Немає (покращує кешування)" на "Білий список".
4. Додайте "Походження" до списку "заголовки білого списку"
5. Збережіть зміни

Ваш розповсюдження на обласному напрямку буде оновлено, що займе близько 10 хвилин. Після цього все має бути добре, ви можете перевірити, перевіривши, чи не пов’язані повідомлення про помилки CORS з браузера.

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

Об’єднайте це зі своєю веб.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але це встановлює лише заголовки на doc. Використання rawConnectHandlersстосується всіх активів, що обслуговуються (шрифти / css / тощо).

  // 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();
  });

Це був би найкращий час, щоб переглянути політику браузера, як обрамлення тощо.

Просто додайте використання походження у своєму, якщо ви використовуєте 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.

Додайте заголовки CORS HTTP (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

Збережіть це і все!

Caveat: Я виявив, що іноді Firefox не оновлює шрифти, навіть якщо помилка CORS відсутня. У такому випадку продовжуйте оновлення сторінки кілька разів, щоб переконати Firefox у тому, що ви дійсно налаштовані.