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

Amazon S3 CORS を使用した Firefox でのクロスオリジン フォントの読み込みへの対処

Firefox には、異なるオリジンからのフォントの読み込みに関する長年の問題があります。ウェブページ。この問題は、フォントが CDN でホストされている場合によく発生します。さまざまな解決策が提案されていますが、Amazon S3 CORS (Cross-Origin Resource Sharing) を利用してこの問題を解決できますか?

フォント読み込み用の CORS 設定

を有効にするにはCORS を介してフォントを読み込む場合は、次の CORS ポリシーを使用して 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>

この構成特定のヘッダーを持つ指定したドメインからの GET リクエストを許可し、クロスオリジンでのフォントの読み込みを有効にします。

クエリ文字列の回避策

Cloudfront が Access-Control-Allow-オリジン ヘッダー。クエリ文字列を使用して、異なるドメインからの呼び出しを区別することを検討してください。

たとえば、ドメインの場合A:

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

ドメイン B:

https://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

この回避策により、Cloudfront が各ドメインに正しい CORS ヘッダーを提供できるようになります。

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