web-dev-qa-db-ja.com

OriginからのフォントはCross-Origin Resource Sharingポリシーによってロードがブロックされています

いくつかのChromeブラウザで以下のエラーが表示されますが、全部ではありません。現時点で何が問題なのか完全にはわからない。

Originからのフォント ' https://ABCDEFG.cloudfront.net 'は、クロスオリジンリソース共有ポリシーによって読み込みがブロックされています。オリジン ' 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からの他のすべての要求は正しく機能します。

amazon-web-servicesamazon-s3corsamazon-cloudfront
147
Dallas Clark

このルールをあなたの .htaccess に追加してください

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

さらに良いことに、@ David thomasによって示唆されているように、特定のドメイン値を使うことができます。

Header add Access-Control-Allow-Origin "your-domain.com"
81
Giovanni Di Gregorio

2014年9月から10月までのChromeは、Firefoxが行ったのと同じCORSチェックの対象となるフォントを作成します 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の詳細については、 Amazon S3 CORS（クロスオリジンリソース共有）およびFirefoxのクロスドメインフォントロード のスタックオーバーフローの回答を参照してください。

一般的にNBは、これはFirefoxにのみ適用されていたため、ChromeではなくFirefoxを検索するのに役立つ可能性があります。

56
Tim Diggins

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

例：

<?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>
43
Özer S.

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/

29
Yaniv Vova Alterman

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

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

<AllowedOrigin>*</AllowedOrigin>

CloudFront - > Distribution - >このOriginのビヘイビアで、Forward Headers：Whitelistオプションを使用し、 'Origin'ヘッダーをホワイトリストに追加します。

CloudFrontが新しいルールを伝播するまで、20分ほど待ちます

これであなたのCloudFrontディストリビューションは異なるクライアントOriginヘッダに対して異なるレスポンスを（適切なCORSヘッダと共に）キャッシュするべきです。

12
KBH

私のために働いている唯一のもの（おそらく私はwww。usageと矛盾していたため）：

これをあなたの.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

4
Luigi04

私はこれと同じ問題を抱えていて、このリンクは私に解決策を提供しました：

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

その短いバージョンは次のとおりです。

  1. S3 CORS設定を編集します（私のコードサンプルは正しく表示されませんでした）
    注：これは元の質問で既に行われています
    注意：提供されているコードは安全ではなく、リンク先ページに詳しい情報があります。
  2. あなたのディストリビューションの "Behaviors"タブに行き、クリックして編集してください。
  3. 「転送ヘッダー」を「なし（キャッシュを改善）」から「ホワイトリスト」に変更します。
  4. 「ホワイトリストヘッダー」リストに「Origin」を追加します。
  5. 変更を保存する

クラウドフロントディストリビューションが更新されます。これには約10分かかります。その後、すべてうまくいっているはずです、あなたはCORS関連のエラーメッセージがブラウザから消えたことをチェックすることによって確認することができます。

3
agbodike

Nice writeup here があります。

nginx/Apacheでこれを設定するのは誤りです。
あなたがホスティング会社を使用している場合、Edgeを設定することはできません。
Dockerを使用している場合、アプリは自己完結型でなければなりません。

いくつかの例ではconnectHandlersを使用していますが、これはdocのヘッダを設定するだけです。 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();
  });

フレーミングなどのように ブラウザポリシー を見るのに良い時期です。

1
Michael Cole

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");
1
nu everest