AWS S3 + CloudFront のCORS設定手順（画像はAWS-CloudDesignPatternから引用） フォントファイルの豆腐化問題Font Awesomeのようなフォントファイルを外部ホスト（例えばS3など）から読み込もうとする場合、Access-Control-Allow-OriginのヘッダでAllowされていないOriginからのリクエストの場合、いわゆるフォントの豆腐現象が起きます。これはCORS(Cross-Origin Resource Sharing) の設定が正しくなされていないためです。今回はAWSのS3+CloudFrontの構成でフォントファイルを配信したいので、S3およびCloudFrontのCORS設定手順および確認方法について説明します。 S3の設定CORSの設定はS3のバケットのプロパティ設定から行えます。 XMLをサンプルとして下記のように設定できます。 CORS Configuration <
