Amazon S3 CORS での Firefox のクロスオリジン フォント読み込みの問題を解決するにはどうすればよいですか?

Amazon S3 CORS と Firefox のクロスオリジン フォント読み込みの解決策

最近のアップデートと実用的な解決策により、Firefox がドメインからフォントを読み込めないという長年の問題が解決されました。現在のウェブページ以外。この問題は一般に、フォントがコンテンツ配信ネットワーク (CDN) を通じて提供されるときに発生します。

Amazon S3 Cross-Origin Resource Sharing (CORS) を利用すると、この問題は次のアプローチで解決できます:

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>

ソリューションの理解

提供された S3 CORS 設定により、指定されたドメインからのフォント リソースのリクエストが有効になり、ブラウザーにさまざまなオリジンからフォントを読み込む権限が付与されます。次のようなメソッド、ヘッダー、および応答ヘッダーが許可されます:

• AllowedMethod: ブラウザーがフォントを取得するために使用する HTTP GET メソッドを指定します。
• MaxAgeSeconds: 応答のキャッシュ期間を 3000 秒に設定します。ブラウザがキャッシュされたフォントを再利用できるようにします。
• AllowedHeader: フォントの読み込みに必要な Content-* ヘッダーと Host ヘッダーをリクエストに含める権限をブラウザに付与します。

Cloudfront キャッシュ問題の代替解決策

Cloudfront キャッシュが発生した場合は、回避策は、クエリ文字列を利用して、異なるドメインからの呼び出しを区別することです:

http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

このアプローチにより、Cloudfront は指定されたクエリ文字列に基づいて適切な Access-Control-Allow-Origin ヘッダーを確実に提供します。

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