CloudfrontでAccess-Control-Allow-Originを設定する


15

AWS Cloudfrontを使用してFirefoxに静的アセットを提供する際に問題が発生しています。

Chromeは完璧に動作しますが、FirefoxはCORSエラーを返しています。

curlを実行すると、次の結果が得られます。

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Content-Length: 39420
Connection: keep-alive
Date: Mon, 11 Aug 2014 21:53:50 GMT
Cache-Control: public, max-age=31557600
Expires: Sun, 09 Aug 2015 01:28:02 GMT
Last-Modified: Fri, 08 Aug 2014 19:28:05 GMT
ETag: "9df744bdf9372cf4cff87bb3e2d68fc8"
Accept-Ranges: bytes
Server: AmazonS3
Age: 2743
X-Cache: Hit from cloudfront
Via: 1.1 c445b20dfbf3128d810e975e5d84e2cd.cloudfront.net (CloudFront)
X-Amz-Cf-Id: ...

私はヘッダーが必要だと思う:

Access-Control-Allow-Origin: *

誰も私を助けることができますか?ChromeではなくFirefoxで問題になるのはなぜですか?どうすれば解決できますか?

回答:


18

まず、発信元ヘッダーをホワイトリストに登録する必要があります。

CloudFrontがクロスオリジンリソース共有設定を尊重するようにするには、オリジンヘッダーをオリジンに転送するようにCloudFrontを構成します。

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-cors

参照:http : //aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

ところで、serverfault / stackoverflowにはいくつかの同様の質問と多くの回答があります。


4

これは、受け入れられた答えが示すよりも少し複雑です。

Cloudfront + S3を使用する場合のCORSサポートは、実際にはS3に実装されており、Amazonによると次のように機能します。

要求のOriginヘッダーはAllowedOrigin要素と一致する必要があります。

プリフライトOPTIONSリクエストがAllowedMethod要素の1つでなければならない場合のリクエストメソッド(GETまたはPUTなど)またはAccess-Control Request-Methodヘッダー。

プリフライトリクエストのリクエストのAccess-Control-Request-Headersヘッダーにリストされているすべてのヘッダーは、AllowedHeader要素と一致する必要があります。

これは理にかなっていますが、明確ではないかもしれませんが、Originヘッダーがクライアントによって送信されない場合、この処理はまったく行われません。そして、前にCloudfrontを使用しています。静的なアセットをホストしている場合は、キャッシュ時にすべてのヘッダーを無視するように設定している可能性があります。したがって、特定のエッジノードから各ファイルへの最初の要求にOriginヘッダーが含まれていない場合、Access-Control-Allow-Originヘッダーなしで応答がキャッシュされます。

その結果、最初の着信要求により、キャッシュの有効期限が切れるまで、すべての要求に対して返されるヘッダーが決定されます。

これを修正/回避するにはいくつかの方法があります。

  • 「Origin」ヘッダーに基づいて条件付きキャッシュを実行するようにcloudfrontをセットアップします。

数個または1個のオリジンのみが期待される場合、これは正常に機能しますが、そうでない場合、キャッシング率が非常に悪くなる可能性があります。

  • Lambda @ edgeを使用してヘッダーを強制的に設定します。これは各オリジン(S3)リクエストに対して1回だけ実行できます。

完全に柔軟ですが、オーバーヘッドとコストが追加されます。

  • cloudfrontがすべてのリクエストの「Origin」ヘッダーをダミー値にオーバーライドするようにします。

これは、「Access-Control-Allow-Origin:*」の場合にのみ非常に便利であり、ちょっとしたハックですが、おそらくCloudfront + S3で静的アセットをホストする場合の現在の最良のソリューションです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.