☰

AWS CloudFront: オリジンからのフォントがクロスオリジンリソース共有ポリシーによって読み込みがブロックされました 質問する

tag-icon • tag-icon amazon-web-services amazon-s3 cors amazon-cloudfront
AWS CloudFront: オリジンからのフォントがクロスオリジンリソース共有ポリシーによって読み込みがブロックされました 質問する

いくつかの Chrome ブラウザで次のエラーが表示されますが、すべてではありません。現時点では問題が何なのか完全にはわかりません。

オリジンからのフォントは、https://ABCDEFG.cloudfront.netクロスオリジン リソース共有ポリシーによって読み込みがブロックされています: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。https://sub.domain.exampleしたがって、オリジンはアクセスを許可されません。

S3に次のCORS設定があります

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

リクエスト

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.example
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

Cloudfront/S3 からのその他のすべてのリクエストは、JS ファイルを含めて正常に機能します。

ベストアンサー1

このルールを.htaccess

Header add Access-Control-Allow-Origin "*"

さらに良いことに、@david thomas の提案によると、特定のドメイン値を使うこともできます。例:

Header add Access-Control-Allow-Origin "your-domain.example"

おすすめ記事