34

要旨：

s3 からの画像のタグ読み込み (HTMLimgタグ) を使用するページがあり、xmlhttprequest. タグの読み込みは CORS ヘッダーなしでキャッシュされるためxmlhttprequest、キャッシュされたバージョンが表示され、そのヘッダーがチェックされ、クロス オリジン エラーで失敗します。

詳細：

edit : safari 5.1.6 と chrome 21.0.1180.89 の両方で失敗します。Firefox 14 では問題なく動作します。

S3 の新しい CORS を使用して、次のCORSRuleようにセットアップします。

<CORSRule>
  <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
  <AllowedMethod>HEAD</AllowedMethod>
  <MaxAgeSeconds>0</MaxAgeSeconds>
  <AllowedHeader>*</AllowedHeader>
</CORSRule>

リクエストヘッダーにオリジンを設定せずにS3から画像をリクエストすると、レスポンスにCORSヘッダーなしで画像が返されます。

この get がキャッシュされ、後続の CORS リクエスト (リクエスト ヘッダーにオリジンを設定するもの) は、ブラウザがキャッシュから非 CORS バージョンを使用するため拒否されます。

これを解決する最善の方法は何ですか? 非 CORS バージョンがキャッシュされないように何かを設定できますか? ?some_flagリクエストの URL にa を追加して、CORS リクエストを区別する必要がありますか?

理想的には、リクエストに「origin」が含まれていなくても、S3 が常に必要な CORS ヘッダーを送り返すようにします。

4

5 に答える 5

9

私は同じ問題に遭遇しました。@monsur が言ったように、問題は、S3 が「Vary: Origin」ヘッダーを設定する必要があるにもかかわらず、設定しないことです。残念ながら、私の知る限り、S3 にそのヘッダーを送信させる方法はありません。?origin=example.comただし、 CORS が必要な場合などにクエリ文字列パラメーターをリクエストに追加することで、これを回避できます。クエリ文字列により、ブラウザはキャッシュされたリソースを使用しないように強制されます。

理想的には、クラウドフロントと S3 は、CORS が有効になっているときに Vary:Origin ヘッダーを送信するか、Webkit が Origin ヘッダーを暗黙的に変更します。これは、Firefox にはこの問題がないためだと思います。

于 2014-03-21T00:48:51.547 に答える
0

CORS リクエストを行った後、Javascript を使用して img タグを追加できます。

于 2014-05-28T20:26:35.510 に答える