139

Firefox が現在の Web ページとは異なるオリジンからフォントを読み込まないという長年の問題がありました。通常、フォントが CDN で提供されるときに問題が発生します。

他の質問では、さまざまな解決策が提起されています。

CSS @font-face は Firefox では機能しませんが、Chrome と IE では機能します

Amazon S3 CORS の導入により、CORS を使用して Firefox のフォント読み込みの問題に対処するソリューションはありますか?

編集: S3 CORS 構成のサンプルをご覧いただければ幸いです。

edit2:実際に何をしたのか理解せずに、実用的な解決策を見つけました。Amazon の構成の解釈で発生する構成とバックグラウンド マジックについて、誰かがより詳細な説明を提供できる場合は、それに対して報奨金を出した nzifnab のように、非常に高く評価されます。

4

13 に答える 13

151

2014 年 9 月 10 日更新:

Cloudfront は現在 CORS を適切にサポートしているため、以下のクエリ文字列ハックを行う必要はもうありません。詳細については、 http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/およびこの回答を参照してください: https://stackoverflow.com/a/25305915/308315

OK、ドキュメントの例から少し調整して、以下の構成を使用してフォントが機能するようになりました。

私のフォントは S3 でホストされていますが、クラウドフロントが前面にあります。

なぜそれが機能するのかはわかりませんが、おそらく<AllowedMethod> GETand<AllowedHeader> Content-*が必要だと思います。

Amazon S3 の CORS 構成に精通している方であれば、この点について少しでも理解を深めていただければ幸いです。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

編集：

一部の開発者は、Cloudfront がAccess-Control-Allow-Originヘッダーをキャッシュするという問題に直面しています。この問題は、以下のリンク ( https://forums.aws.amazon.com/thread.jspa?threadID=114646 )で AWS スタッフによって対処されており、@Jeff-Atwood によってコメントされています。

リンクされたスレッドから、回避策として、異なるドメインからの呼び出しを区別するためにクエリ文字列を使用することをお勧めします。ここで短縮された例を再現します。

curl応答ヘッダーのチェックに使用:

ドメイン A: a.domain.com

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

ドメイン A からの応答ヘッダー:

Access-Control-Allow-Origin: https://a.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

ドメイン B: b.domain.com

curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

ドメイン B からの応答ヘッダー:

Access-Control-Allow-Origin: http://b.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

Access-Control-Allow-OriginがCloudfront キャッシュを通過した異なる値を返したことに気付くでしょう。

于 2012-09-08T12:45:57.507 に答える
8

ドキュメントには、構成を「バケット内の cors サブリソース」として貼り付けることができると記載されています。これは、構成を使用してバケットのルートに「cors」というファイルを作成することを意味すると解釈しましたが、これは機能しません。最後に、Amazon S3 管理エリアにログインしproperties、バケットのダイアログ内に構成を追加する必要がありました。

S3はより良いドキュメントを使用できます...

于 2012-09-24T18:51:40.170 に答える
6

私の場合、CORS 構成で XML 名前空間とバージョンを定義していませんでした。機能したものを定義します。

かわった

<CORSConfiguration>

に

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
于 2014-05-21T03:48:00.860 に答える
5

もっと簡単で良い方法があります！

個人的には、DNS サブドメインを使用してこの問題を解決することを好みます。CDN が sdf73n7ssa.cloudfront.net ではなく cdn.myawesomeapp.com の背後にある場合、ブラウザーはフリークアウトせず、クロス ドメイン セキュリティの問題としてそれらをブロックしません。

サブドメインを AWS Cloudfront ドメインにポイントするには、AWS Cloudfront コントロール パネルに移動し、Cloudfront ディストリビューションを選択して、CDN サブドメインを [代替ドメイン名 (CNAME)] フィールドに入力します。cdn.myawesomeapp.com のようなもので十分です。

これで、DNS プロバイダー (AWS Route 53 など) に移動し、sdf73n7ssa.cloudfront.net を指す cdn.myawesomeapp.com の CNAME を作成できます。

http://blog.cloud66.com/cross-origin-resource-sharing-cors-blocked-for-cloudfront-in-rails/

于 2015-03-02T14:12:57.857 に答える
4

この構成は私にとってはうまくいきました。オブジェクトの一覧表示、取得、更新、削除ができます。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
  </CORSRule>
</CORSConfiguration>
于 2015-08-02T15:36:12.090 に答える
0

スプリング ブート アプリケーション (サーバー) を再起動すると、問題が解決しました。

S3でCORSを正しく構成しました。カールは、元のヘッダーで正しい応答を返していました。Safari はフォントを正しく取得していました。CORS を受け入れようとしなかったのは chrome だけでした。

何が原因で動作したのか正確にはわかりません。If-modified-since と何か関係があるに違いない

于 2016-10-10T11:29:46.280 に答える
-1

はい、もちろん。Firefox は、 http://dev.w3.org/csswg/css3-fonts/#allowing-cross-origin-font-loadingの仕様で要求されているように、フォントの CORS をサポートしています。

于 2012-09-02T05:59:03.183 に答える