Chrome S3 Cloudfront:最初のXHRリクエストに「Access-Control-Allow-Origin」ヘッダーがありません
jQueryを使用してS3からCloudFront CDNを介していくつかのSVGファイルをロードするWebページ(https://smartystreets.com/contact)があります。 Chromeでは、コンソールだけでなくシークレットウィンドウも開きます。次に、ページをロードします。ページがロードされると、通常、コンソールに次のような6〜8個のメッセージが表示されます。 XMLHttpRequest cannot load https://d79i1fxsrar4t.cloudfront.net/assets/img/feature-icons/documentation.08e71af6.svg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://smartystreets.com' is therefore not allowed access. ページの標準的な再読み込みを複数回行っても、同じエラーが引き続き発生します。そうすればCommand+Shift+R、ほとんどの、時にはすべての画像がXMLHttpRequestエラーなしでロードされます。 時々、画像が読み込まれた後でも更新され、1つ以上の画像が読み込まれず、XMLHttpRequestエラーが再び返されます。 S3とCloudfrontの設定を確認、変更、再確認しました。S3では、私のCORS設定は次のようになります。 <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedOrigin>http://*</AllowedOrigin> <AllowedOrigin>https://*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> </CORSConfiguration> (注:最初は<AllowedOrigin>*</AllowedOrigin>同じ問題しかありませんでした。) CloudFrontでは、ディストリビューションの動作はHTTPメソッドを許可するように設定されていますGET, HEAD, OPTIONS。キャッシュされたメソッドは同じです。Forward Headersは「Whitelist」に設定され、そのホワイトリストには「Access-Control-Request-Headers、Access-Control-Request-Method、Origin」が含まれます。 キャッシュレスブラウザーのリロード後に機能するという事実は、すべてがS3 / CloudFront側にあることを示しているようです。しかし、なぜ最初のページビューでコンテンツが配信されないのでしょうか? macOS上のGoogle Chromeで作業しています。Firefoxは毎回ファイルを取得しても問題ありません。Operaはファイルを取得しません。Safariは、数回更新すると画像を取得します。 …