☰

AWS Cloudfront CORS フォントファイルに関する問題

tag-icon • tag-icon amazon-s3 amazon-cloudfront cors css
AWS Cloudfront CORS フォントファイルに関する問題

CloudFront エンドポイントからブラウザに配信される Javascript アプリケーションがあります。アプリケーションのすべての静的ファイルは S3 バケットでホストされています。これには、大量の JavaScript ファイルと CSS ファイル、およびいくつかのフォント ファイルが含まれます。

アプリケーション全体をロードする HTML はサーバーによって生成され配信されます。そのサーバーを「https://my.domain.com」と呼びます。

前述したように、これは単なる HTML ファイルです。全て次に、バケットをオリジンとして指定する CloudFront エンドポイントから静的コンテンツがダウンロードされます。これらを xxxx.cloudfront.net、バケットを my-bucket と呼びます。

私の理解する限りでは、生成された HTML から CloudFront エンドポイントへのほぼすべてのリクエストは CORS リクエストです。これは、HTML の発信元が my.domain.com であり、リクエストされたファイルはすべてそのドメインでホストされていないことが明らかだからです。

当然のことながら、私は CORS 関連のすべてをセットアップしました。まず、バケットは完全にパブリックであり、次の CORS ポリシーが適用されます。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*",
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

そして、それはすべてにおいて効果があるようです...を除外するフォント ファイルです。バケットのフォルダー構造について触れておくべきでしょう。このバケットには、production、development、common の 3 つのフォルダーがあります。これらの内容は、一目瞭然です。common にはフォントのほか、サードパーティの JavaScript ライブラリも含まれています。production と development には、それぞれの環境の js と css が含まれています。

いかなる場合でも、すべてフォント ファイル以外は読み込まれますが、フォント ファイルについては次のエラーが発生します。

Access to font at 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' from origin 'https://my.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

非常に奇妙に思ったのはのみフォントファイルにはこの問題があります。共通フォルダ内の他のファイルは問題なく読み込まれるようです。https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2ブラウザに入力すると作品。

唯一の違いは、これらのファイルが HTML からではなく、@font-face を介して CSS から読み込まれることです。アプリケーションの読み込み時にブラウザによって生成されたリクエストを見ると、たとえば origin ヘッダーが設定されていることがわかります。これは、js ファイルや css ファイルのリクエスト用ではありませんでした。Set-Fetch-Mode は「cors」に設定されていますが、他のファイルでは「no-cors」に設定されています。

いずれにせよ、私はクラウドフロント側で問題を修正しようとしました。まず、オリジン構成にヘッダー「Access-Control-Allow-Origin: *」を追加しました。次に、パスパターン * に対して GET、HEAD、OPTIONS を許可するようにオリジンの動作構成を追加しました。

そして今... まあ、今でも同じ問題を抱えていて、まったくアイデアが出てきませんが、@font-face によって作成されたリクエストが、JavaScript や CSS リソースのリクエストと比較してなぜそれほど異なって形成されるのか疑問に思っていますが、何よりも、一体どうすればこれらのフォントをロードできるのでしょうか?

答え1

はい、これは迷惑ですが、論理的だと思います。

上記で投稿した修正仕事するただし、設定の変更によってクラウドフロントのキャッシュが無効になることはありません。また、CORSエラーはブラウザCloudFront は、何も問題が見つからなかったため、その応答、ヘッダーなどすべてをキャッシュしました。

簡単に言うと、構成変更後にクラウドフロント キャッシュを無効にしましたが、今は動作します。ARGH!

関連情報