13

HerokuでホストされているRailsアプリがあります。デプロイメント中、アセットはgem を介してAmazon S3バケットと同期され、ビューはCloudFrontを介してそれらのアセットを呼び出します。ただし、 Firefoxで Web サイトを表示すると、フォントがレンダリングされません(ファイルは Firebug の [ネット] タブに読み込まれますが、単に使用されません)。サファリはうまく機能します。asset_sync

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>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>

私のアプリは、次のヘッダーも設定します。

Access-Control-Allow-Origin: *
Access-Control-Request-Method: *

しかし、CloudFrontはそれらなしでフォントを返します... フォントがロードされないのはなぜですか? 前もって感謝します。

4

4 に答える 4

8

Internet Explorer と Firefox の一部のバージョンは、フォントを攻撃ベクトルと見なし、別のドメイン (クロス ドメイン ポリシー) によって提供されているフォントの読み込みを拒否します。

標準のHTTPサーバーでは、ヘッダーを追加しAccess-Control-Allow-Origin: *て CORS ポリシーをバイパスするだけです。問題は、S3が送信をサポートしていないことです。(仕様によれば、CORS をサポートする必要がありますが、ヘッダーは送信されません)。

回避策があります。Access-Control-Allow-OriginCloudFront は、ヘッダーを送信できる別のサーバーを指すことができます(アプリを提供するサーバーで行うことができます;))。

これは、 AWS コンソールからCloudFrontディストリビューションにカスタム オリジンを追加することで実行できます。次に、フォント タイプと新しく追加されたOriginを使用してBehaviorsを追加する必要があります。ファイル名にはワイルドカードを使用できます。(これは、使用しているフォント タイプごとに 1 回行う必要があります)。

例：

Path Pattern: /assets/*.woff

準備ができたら、次の方法でヘッダーの存在を検証できます。

curl -I http://cloudfrontid.cloudfront.new/assets/font.woff

うまくいけば、ファイル自体とともにサーバーAccess-Control-Allow-Originによって提供され、 CloudFrontによってキャッシュされ、ヘッダーが含まれているヘッダーが表示されます。

それが役に立てば幸い！

于 2013-11-17T21:38:25.750 に答える
2

Cloudfront で (キャッシュされた) フォント ファイルを無効にしてみてください: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html#invalidating-objects-console

今日も同様の問題がありました。CORS 構成が CloudFront にキャッシュされることを示唆する記事を読みました。フォント ファイルを無効にすることで問題を解決しました。

于 2013-10-01T16:09:20.617 に答える
0

This is what my CORS config looks like. I have a different AllowedHeader than you. I don't use asset_sync.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
于 2013-11-14T18:05:02.777 に答える