元のフォントは、クロスオリジンリソースシェアリングポリシーによってロードがブロックされています

一部のChromeブラウザーで次のエラーが表示されますが、すべてではありません。この時点で問題が何であるかは完全にはわかりません。

元のフォント「https://ABCDEFG.cloudfront.net」は、クロスオリジンリソース共有ポリシーによってロードがブロックされました：リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' https://sub.domain.com 'はアクセスを許可されません。

S3に次のCORS構成があります

<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

JSファイルを含め、Cloudfront / S3からの他のすべてのリクエストは適切に機能します。

このルールを.htaccessに追加します

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

@david thomasによって提案されているように、特定のドメイン値を使用できます。

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

2014年9月10日以降のChromeでは、Firefoxがhttps://code.google.com/p/chromium/issues/detail?id=286681を実行したのと同じCORSチェックがフォントに適用されます。これに関する議論はhttps://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzwにあります

フォントの場合、ブラウザがプリフライトチェックを行う場合があるため、 S3ポリシーにはcorsリクエストヘッダーも必要です。たとえば、Safari（現時点ではフォントのCORSチェックを行わない）やFirefox（そうする）でページをチェックして、これが説明されている問題であることを再確認できます。

Amazon S3 CORSの詳細については、Amazon S3 CORS（クロスオリジンリソースシェアリング）のスタックオーバーフローの回答とFirefoxのクロスドメインフォントの読み込みをご覧ください。

これは通常、Firefoxにのみ適用されていたため、ChromeではなくFirefoxを検索すると役立つ場合があります。

<AllowedMethod>HEAD</AllowedMethod>S3バケットのCORSポリシーに追加するだけで問題を解決できました。

例：

<?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. 権限=> Cors構成の編集=>保存
4. 保存する

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

2014年6月26日、AWSはCloudFrontで適切なVary：Originの動作をリリースしました。

S3バケットのCORS構成を設定します。

<AllowedOrigin>*</AllowedOrigin>

CloudFront-> Distribution-> Behaviors for this originで、Forward Headers：Whitelistオプションを使用し、「Origin」ヘッダーをホワイトリストに登録します。

CloudFrontが新しいルールを伝達する間、約20分待ちます

これで、CloudFrontディストリビューションは、異なるクライアントOriginヘッダーに対して（適切なCORSヘッダーを使用して）異なる応答をキャッシュするはずです。

私のために働いた唯一のこと（おそらく私が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. 「Forward Headers」を「None（Improves Caching）」から「Whitelist」に変更します。
4. 「ホワイトリストヘッダー」リストに「オリジン」を追加します
5. 変更を保存します

cloudfrontディストリビューションが更新されます。これには約10分かかります。その後、すべてが順調に進んでいるはずです。CORS関連のエラーメッセージがブラウザからなくなったことを確認することで確認できます。

web.configファイルでMicrosoft製品を使用している場合：

これを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();
  });

これは、フレーミングなどのブラウザポリシーを確認する良い機会です。

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 （引用符が続きます）：

HerokuでRailsアプリを実行していて、CloudfrontをCDNとして使用している場合にできることは、次のとおりです。Ruby 2.1 + Rails 4、Heroku Cedarスタックでテストされました。

CORS HTTPヘッダー（Access-Control- *）をフォントアセットに追加する

• font_assetsGemfile にgem を追加します。
• 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にコードをプッシュします。

CORS HTTPヘッダーを転送するようにCloudfrontを構成する

Cloudfrontで、ディストリビューションを選択し、[動作]タブで、フォント配信を制御するエントリを選択して編集します（ほとんどの単純なRailsアプリの場合、ここには1つのエントリしかありません）。変更フォワードヘッダ「Whilelist」を「なし」から。次のヘッダーをホワイトリストに追加します。

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

それを保存すればそれだけです！

警告：CORSエラーがなくても、Firefoxがフォントを更新しないことがあります。この場合、ページを数回更新して、Firefoxが本当に決心していると確信させてください。