Amazon S3 CORS は Firefox のクロスドメインフォント読み込みの問題を解決できますか?

Amazon S3 CORS と Firefox のクロスドメイン フォントの読み込み

バックグラウンド

Firefox は歴史的に現在の Web ページとは異なるオリジンからフォントを読み込むときに、特にフォントがCDN に保存されます。さまざまな解決策が提案されていますが、Amazon S3 Cross-Origin Resource Sharing (CORS) の導入により、CORS を使用してこの問題に対処できるかどうかという疑問が生じています。

CORS 設定

この問題に対処するために正常に実装された 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>

この構成におけるAllowedMethod (GET) 設定とAllowedHeader (Content-*) 設定の重要性は非常に重要です。

クエリ文字列の回避策

場合によっては、Cloudfront による Access-Control-Allow-Origin ヘッダーのキャッシュが原因で開発者に問題が発生する可能性があります。これに対処するために、AWS スタッフはクエリ文字列を使用してさまざまなドメインからのリクエストを区別することを推奨しています。

各ドメインに一意のクエリ文字列 ("?https_a.domain.com" や "?http_b. domain.com" の場合、Cloudfront は異なる Access-Control-Allow-Origin 値を返し、ドメイン間でのフォントの読み込みを許可します。

以上がAmazon S3 CORS は Firefox のクロスドメインフォント読み込みの問題を解決できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。