web-dev-qa-db-ja.com

S3 - Access-Control-Allow-Originヘッダー

誰かがレスポンスヘッダにAccess-Control-Allow-Originを追加することに成功しましたか？私が必要としているのはこのようなものです。

<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />

このgetリクエストはレスポンス、ヘッダ、Access-Control-Allow-Origin: *に含まれるべきです

バケットに対する私のCORS設定は次のようになります。

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

ご想像のとおり、Origin応答ヘッダーはありません。

amazon-web-servicesamazon-s3corshttp-headers
147
Wowzaaa

通常は、バケットのプロパティに「Add CORS Configuration」を追加するだけです。

Amazon-screen-shot

<CORSConfiguration>にはいくつかのデフォルト値があります。あなたの問題を解決するために必要なのはこれだけです。ただ「保存」をクリックして、それがうまくいったかどうか確かめるためにもう一度試みてください。もしそうでなければ、（alxrb answerからの）下記のコードを試すこともできます。これはほとんどの人にとってうまくいったようです。

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

詳細については、 バケット権限の編集 でこの記事を読むことができます。

150
Flavio Wuensche

私はバケットのプロパティで 'add CORS configuration'をクリックしたとき、私はウェブフォントのロードに関して同様の問題を抱えていました、このコードはすでにそこにありました：

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

保存をクリックしただけで、問題なく機能しました。カスタムWebフォントはIE＆Firefoxに読み込まれていました。私はこれについて専門家ではありません、私はちょうどこれがあなたを助けるかもしれないと思った。

93
alxrb

@jordanstephensはコメントでこれを述べました、しかし、それはちょっと失われて、そして私にとって本当に簡単な修正でした。

私は単にHEADメソッドを追加して保存をクリックすると動作し始めました。

<CORSConfiguration>
        <CORSRule>
                <AllowedOrigin>*</AllowedOrigin>
                <AllowedMethod>GET</AllowedMethod>
                <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
                <MaxAgeSeconds>3000</MaxAgeSeconds>
                <AllowedHeader>Authorization</AllowedHeader>
        </CORSRule>
</CORSConfiguration>
35
Senica Gonzalez

リクエストにOriginヘッダーが指定されていない場合、S3はレスポンスにCORSヘッダーを含めません。 CORSをテストするためにファイルを丸めようとし続けましたが、curlにはOriginが含まれていないため、これは本当に私を投げつけました。

31
eremzeit

これはこれを機能させる簡単な方法です。

これは古い質問ですが、それでも解決策を見つけるのは難しいです。

まず始めに、これはRails 4、Paperclip 4、CamanJS、Heroku、およびAWS S3で構築されたプロジェクトで私にとって役に立ちました。

あなたはcrossorigin: "anonymous"パラメータを使ってあなたの画像をリクエストしなければなりません。

    <img href="your-remote-image.jpg" crossorigin="anonymous">

サイトのURLをAWS S3のCORSに追加します。 ここ それについてのAmazonからの言及です。ほとんどの場合は、バケツに移動して、右側のタブから「プロパティ」を選択し、「を開きます。 ）Permissionsタブをクリックし、「CORS設定の編集」をクリックします。

もともと、私は< AllowedOrigin>を*に設定していました。そのアスタリスクをURLに変更するだけで、必ずhttp://やhttps://のようなオプションを別々の行に入れてください。私はアスタリスクが "All"を受け入れることを期待していましたが、どうやら我々はそれより具体的でなければなりません。

これは私がどのように見えるかです。

enter image description here

28
Horacio

上記の回答を参照してください。 （私もクロムのバグがありました）

CHROMEのページに画像をロードして表示しないでください。 （後で新しいインスタンスを作成する予定の場合）

私の場合は、画像を読み込んでページに表示しました。それらがクリックされたとき、私はそれらの新しいインスタンスを作成しました：

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

Chromeはすでに別のバージョンをキャッシュしており、表示されている画像でcrossoriginを使用している場合でも、決してcrossoriginバージョンを再取得しようとしませんでした。

キャンバス用にロードしたときに、画像のURLの最後に?crossoriginを追加しました（ただし、?blahを追加できます。キャッシュステータスを変更することは任意です）

17
Funkodebat

私は問題を解決しました この回答 - 上記に追加します。

AWS/CloudFront配布ポイントをCORSオリジンヘッダーを修正するように設定するには、配布ポイントの編集インターフェイスをクリックします。

enter image description here

「ビヘイビア」タブに移動してビヘイビアを編集し、「選択したリクエストヘッダに基づくキャッシュ」を「なし」から「ホワイトリスト」に変更してから、「Origin」が「ホワイトリスト」ボックスに追加されていることを確認します。詳細については、AWS Docsの CORS設定を尊重するためのCloudFrontの設定 を参照してください。

enter image description here

16
MikeiLL

S3から3DモデルをJavascript 3Dビューア（3D HOP）にロードするときにも、同じような問題がありましたが、奇妙なことに、特定のファイルタイプ（.nxs）を使用した場合に限ります。

修正したのは、CORSの設定でAllowedHeaderをデフォルトのAuthorizationから*に変更することでした。

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

  1. 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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

  2. HttpリクエストにOriginヘッダーがある場合にのみ、S3はCORSヘッダーを追加します。

  3. CloudFrontはデフォルトでOriginヘッダーを転送しません

    CloudFrontディストリビューションの動作設定でOriginヘッダーをホワイトリストに登録する必要があります。

3
Pawel Furmaniak

私は上記のすべての答えを試しましたが、何もうまくいきませんでした。実際には、上の答えから3つのステップをまとめて実行する必要があります。

  1. Flavioが示唆しているように。バケットにCORS設定を追加します。

    <CORSConfiguration>
   <CORSRule>
     <AllowedOrigin>*</AllowedOrigin>
     <AllowedMethod>GET</AllowedMethod>
   </CORSRule>
 </CORSConfiguration>

  2. 画像上。 crossoriginに言及してください。

    <img href="abc.jpg" crossorigin="anonymous">

  3. CDNを使っていますか？ Originサーバへの接続はすべてうまくいくがCDN経由ではうまくいかない場合。それはあなたがあなたのCDN上にCORSヘッダを受け入れるような設定が必要であることを意味します。正確な設定は、使用しているCDNによって異なります。

3
Deepak

私はそれを次のように書いて修正しました：

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

<AllowedHeader>*</AllowedHeader>が機能し、<AllowedHeader>Authorization</AllowedHeader>が機能しないのはなぜですか？

2
Pablo García Miranda

私はこのスレッドにたどり着きましたが、上記の解決策はどれも私のケースには当てはまりませんでした。結局、バケットのCORS設定の<AllowedOrigin> URLから末尾のスラッシュを削除するだけでした。

失敗する

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

勝つ：

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

これで誰かが髪を引っ張るのを防ぐことができます。

2
Charney Kaye

cDNを設定するには、wuenscheの "answer"が正しいです。これをやって、私はMaxAgeSecondsを削除しました。

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
1
Mich. Gio.

他の人が状態を持っているように、あなたはまずあなたのS3バケットにCORS設定を持つ必要があります。

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

しかし、それをした後の私の場合、それはまだ機能していませんでした。私はChromeを使っていました（おそらく他のブラウザでも同じ問題です）。

問題は、Chromeはヘッダー付きの画像をキャッシュしていた（CORSデータを含まない）なので、AWSで何を変更しようとしても、CORSヘッダーは表示されません。

Chromeキャッシュをクリアしてページをリロードするの後、イメージのCORSヘッダーは正しくありません

1
Tonio

最新のS3管理コンソールでは、PermissionsタブのCORS設定をクリックすると、デフォルトのサンプルCORS設定が表示されます。この設定は実際にはアクティブではありません、しかし！ CORSをアクティブにするために最初に「Save」をクリックしなければなりません。

これを理解するのに私は時間がかかりすぎました、うまくいけばこれは誰かに時間を節約するでしょう。

1
hackel

警告-ハック。

S3Imageを使用して画像を表示し、その後フェッチで取得しようとする場合、PDFに挿入するか、他の処理を行う場合、Chromeが最初をキャッシュすることに注意してください結果は、CORSプリフライトリクエストを必要とせず、プリフェッチOPTIONSリクエストを取得せずに同じリソースを取得しようとしますが、ブラウザの制限により失敗します。

これを回避する別の方法は、S3Imageにcrossoriginが含まれることを確認することです：前述の「use-credentials」。 S3Imageを使用するファイル（S3Imageのキャッシュバージョンを作成するコンポーネントがあるので、これは私にとって最適な場所です）、S3ImageのプロトタイプimageElメソッドをオーバーライドして、この属性を強制的に含めます。

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

403問題は解決されました。なんて痛い！

1
Philip Murphy

この設定は私のための問題を解決しました：

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

*を使用すると、バケット内のファイルへのWebサイトへのアクセスが許可されるため、お勧めできません。代わりに、バケットのリソースを使用することを正確に許可するOriginを指定する必要があります。通常、それは次のようなドメイン名です

<AllowedOrigin>https://www.example.com</AllowedOrigin>

または、可能なすべてのサブドメインを含める場合：

<AllowedOrigin>*.example.com</AllowedOrigin>
0
Rudolf B

受け入れられた答えはうまくいきますが、あなたが直接リソースに行った場合、Cross-Originヘッダはありません。 cloudfrontを使用している場合は、これによってcloudfrontがヘッダーなしのバージョンをキャッシュします。このリソースをロードする別のURLに移動すると、このOrigin間の問題が発生します。

0
TigerBear

以下は設定であり、私のために働くことは問題ありません。 AWS S3での問題の解決に役立つことを願っています。

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