38

クライアント側の S3 アップロードが機能しているため、CORS が有効になっているにもかかわらず、S3 がバケットから返すすべてのオブジェクトに CORS ヘッダーを設定するように強制するのに問題があります。返されたオブジェクトには CORS ヘッダーがありません!

私が有効にしたポリシーは次のとおりです。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

オブジェクト URL の例https://s3.amazonaws.com/captionable/meme/test

誰が何が悪いのか知っていますか？

4

4 に答える 4

51

まず、すべてのOriginリクエストのヘッダーを確認してください。Originヘッダーが送信されない場合、S3 はaccess-controlヘッダーを無関係であると見なすため、ヘッダーを送信しません (通常、ヘッダーは無関係です)。Originブラウザー (CORS メカニズムが意図されている) は、XMLHTTPRequest を介してクロスオリジン HTTP 要求を実行するときに、ヘッダーを自動的に送信します。

で画像を読み込む場合、属性imgを追加する必要があります。crossorigin 属性に関する MDN ドキュメントをcrossorigin="anonymous"参照 してください。これにより、ブラウザは XMLHTTPRequest の場合と同様にリクエスト ヘッダーを送信します。Origin

サム・セリコフの答えを見ると、変更する必要があるかもしれません

 <AllowedOrigin>http://*</AllowedOrigin>

に

 <AllowedOrigin>http://*</AllowedOrigin>
 <AllowedOrigin>https://*</AllowedOrigin>

私はこれをテストしていません。

この回答に対する Paul Draper のコメント: キャッシングの問題に注意してください。Access-Controlブラウザーは、適切な応答ヘッダーを含まないキャッシュされた応答を使用する場合があります。開発中に、キャッシュをクリアできます。本番環境では、以前に静的な方法で使用されていた場合、リソースの新しい URL に切り替える必要があります。

于 2013-07-10T12:12:14.623 に答える
31

私もタグでこれに遭遇し、<image>Myrne Stol's answer に従った後、crossorigin=anonymousタグをイメージタグに追加しました。ヘッダーが実際に S3 に送信されていることを確認しましたOriginが、それでもAccess-Control-Allow-Originヘッダーが応答として送信されていませんでした。

私はこのSOの答えに出くわし、それを解決しました。AllowedOriginS3 設定の を次のように変更しました。

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

これで、S3 はアクセス ヘッダーで応答します。わーい！

于 2015-06-07T19:28:36.807 に答える