web-dev-qa-db-ja.com

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

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の問題なのですか？どうすれば解決できますか？

amazon-web-servicesamazon-s3firefoxamazon-cloudfrontcors
15
Tony

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

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には同様の質問がいくつかあり、多くの回答があります。

18
bjunix

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

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

リクエストのOriginヘッダーは、AllowedOrigin要素と一致する必要があります。

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

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

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

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

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

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

少数または単一のOriginのみを想定している場合、これは正常に機能しますが、それ以外の場合、キャッシュ率は本当に悪くなる可能性があります。

  • Lambda @ Edgeを使用してヘッダーを強制的に設定します。これは、Origin（S3）リクエストごとに1回だけ実行できます。

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

  • すべてのリクエストでcloudfrontが「Origin」ヘッダーをダミー値に上書きするようにします。

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

4
Rasmus Larsen