Firefox でクロスドメインフォントを読み込むために Amazon S3 CORS を設定するにはどうすればよいですか?

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

Firefox では、特にフォントが CDN に存在する場合、現在の Web ページ以外のオリジンからフォントを読み込むときに複雑さが発生します。この問題に対処するために、Amazon S3 CORS (Cross-Origin Resource Sharing) の実装など、さまざまなソリューションが提案されています。

S3 CORS 設定

を介してクロスドメイン フォントの読み込みを有効にするにはS3 CORS の場合、Amazon S3 を次のように設定する必要があります:

<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>

これ構成:

• 指定されたオリジン (mydomain.com とそのサブドメイン) からのリクエストを許可します。
• フォントの取得に使用される GET メソッドへのリクエストを制限します。
• キャッシュ時間を 3000 秒に指定して、
• フォントの取得に必要な特定のヘッダー (Content-Type と Host) を許可します。

Cloudfront のキャッシュの問題

一部のユーザーは、Cloudfront のキャッシュで問題が発生する可能性があります。 Access-Control-Allow-Origin ヘッダー。クロスドメイン フォントの読み込みを防止します。これを回避するには、クエリ文字列を使用して、異なるドメインからのリクエストを区別します。例:

<pre class="brush:php;toolbar:false">curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

この例では、クエリ文字列「?https_a.domain.com」はドメイン「a.domain.com」からのリクエストを一意に識別します。その後、Cloudfront は各ドメインに対してカスタマイズされた Access-Control-Allow-Origin ヘッダーを返します。

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