web-dev-qa-db-ja.com

S3はAccess-Control-Allow-Originヘッダーを返しませんか？

クライアント側のS3アップロードが機能しているため、返されたオブジェクトにはCORSヘッダーがないため、バケットから返されるすべてのオブジェクトにS3が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

誰が間違っているのか知っていますか？

amazon-s3cors
30
Cory Dolphin

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

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

サム・セリコフの答えに沿って、あなたは変える必要があるかもしれません

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

に

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

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

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

35
Myrne Stol

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

私は this SO answer に出会い、それを解決しました。S3configのAllowedOriginをこれに変更しました：

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

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

27
Sam Selikoff

Chromeには、修正できないこの驚くべきバグがあります。

enter image description here

タグを生成するコードを制御できるほど幸運であれば、crossorigin="anonymous"タグに。
お気に入り <img src="foo.bar/baz.jpg" crossorigin="anonymous" />
タグのURLまたはXHRリクエストのURLのいずれかを変更できる場合、それらのいずれかにクエリパラメーターを追加して、キャッシュをバイパスできます。
お気に入り foo.bar/baz.jpg?x-request=xhr。

Safariにもこの問題があります。

2
Forivin

TLDR; （どこかで）CORSを必要とするリソースを要求するすべての画像または動画要素がcrossorigin="anonymous"を使用していることを確認してください

キャンバスにエクスポートするビデオ要素でこの問題に遭遇しました。 CORSはS3で正しくセットアップされましたが、それでもエラーが発生し、ビデオの再生を拒否しました。

同じリソースを指す2番目のビデオ要素があり、そのビデオ要素にはcrossorigin="anonymous"がありませんでした。したがって、2番目のビデオはaccess-controlヘッダーを予期していなかったため正常に再生されましたが、サーバーレスポンスがキャッシュされ、キャッシュされたサーバーレスポンスにaccess-control headerがなかったため、最初のビデオの再生がブロックされました

0
d2vid