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応答ヘッダーはありません。

通常、行う必要があるのは、バケットのプロパティで「CORS設定を追加する」ことだけです。

に<CORSConfiguration>はいくつかのデフォルト値が付属しています。あなたの問題を解決するために必要なのはそれだけです。[保存]をクリックして、再試行して機能するかどうかを確認してください。そうでない場合は、以下のコード（alxrb回答から）を試してみてください。

<?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フォントの読み込みで同様の問題が発生していました。バケットのプロパティで[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>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

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

リクエストでOriginヘッダーが指定されていない場合、S3は応答にCORSヘッダーを含めません。CORSをテストするためにファイルをカールしようとし続けましたが、カールには含まれていなかったので、これは本当に私を驚かせましたOrigin。

@jordanstephensがコメントでこれを言ったが、それは一種の失われ、私にとって本当に簡単な修正だった。

HEADメソッドを追加し、[保存]をクリックするだけで機能しました。

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

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

私はこれが古い質問であることを知っていますが、それでも解決策を見つけるのは困難です。

手始めに、これはRails 4、Paperclip 4、CamanJS、Heroku、AWS S3で構築されたプロジェクトで私にとってうまくいきました。

crossorigin: "anonymous"パラメータを使用して画像をリクエストする必要があります。

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

AWS S3のCORSにサイトURLを追加します。これについては、Amazonからの参考文献です。ほとんどの場合、バケットに移動して、右側のタブから[ プロパティ]を選択し、[ 権限 ]タブを開いて、[ CORS設定の編集 ]をクリックします。

もともとはに< AllowedOrigin>設定していました*。あなたのURLへのアスタリスクは、のようなオプション含めるようにしてくださいということだけ変更http://し、https://別の行では。アスタリスクが「すべて」を受け入れることを期待していましたが、明らかにそれよりも具体的である必要があります。

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

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

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

[動作]タブに移動して動作を編集し、[選択したリクエストヘッダーに基づくキャッシュ]を[なし]から[ホワイトリスト]に変更Originして、ホワイトリストボックスに追加されていることを確認します。詳細については、AW​​SドキュメントのCORS設定を尊重するためのCloudFrontの設定を参照してください。

上記の回答を参照してください。（ただし、Chromeのバグもありました）

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している場合でも、そのバージョンを再フェッチすることはありません。

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

S3から3DモデルをJavaScript 3Dビューア（3D HOP）にロードする際に同様の問題がありましたが、奇妙なことに、特定のファイルタイプ（.nxs）でのみ十分です。

私のためにそれを修正したのはAllowedHeader、デフォルトAuthorizationから*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>

他にも状態があるように、最初にCORS設定をS3バケットに含める必要があります。

<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ヘッダーが含まれていました

私はこのスレッドにたどり着きましたが、上記の解決策はどれも私のケースに当てはまることがわかりませんでした。それは、判明私は単にから最後のスラッシュを削除する必要がありました<AllowedOrigin>URL私のバケットのCORS設定で。

失敗する：

<?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>

私はこれが誰かの髪を引っ張ることを救うことを望みます。

私は上記のすべての答えを試しましたが、何もうまくいきませんでした。実際には、上記の回答から3つのステップを組み合わせて機能させる必要があります。

1. フラビオによって提案されたように; バケットにCORS構成を追加します。

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

2. 画像上; crossoriginについて言及する：

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

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

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. S3は、httpリクエストにヘッダーがある場合にのみCORSヘッダーを追加しますOrigin。

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

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

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

<?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>いないのですか？

fwuensche "answer"は、CDNを設定するための正しい方法です。これを行うと、MaxAgeSecondsが削除されました。

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>

最新のS3管理コンソールでは、[Permissions]タブでCORS構成をクリックすると、デフォルトのサンプル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>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

警告-ハック。

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の問題が解決されました。なんて痛みだ！

<AllowedOrigin>*</AllowedOrigin>

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

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

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

<AllowedOrigin>*.example.com</AllowedOrigin>

以下は設定で、私にとってはうまくいきます。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>

受け入れられた回答は機能しますが、リソースに直接アクセスすると、クロスオリジンヘッダーがないようです。cloudfrontを使用している場合、cloudfrontはヘッダーなしのバージョンをキャッシュします。このリソースをロードする別のURLに移動すると、このクロスオリジンの問題が発生します。

CORS設定が役に立たない場合。

構成S3が正しいことを確認します。に無効なバケット名がありましたStorage.configure。私はバケットの短縮名を使用したため、エラーが発生しました。

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。

まず、S3バケットでCORSをアクティブにします。このコードをガイダンスとして使用します。

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

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

2）それでも機能しない場合は、必ずimgタグに「crossorigin」と「*」の値を追加してください。これをあなたのhtmlファイルに入れてください：

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

それだけの価値があるので、私は同様の問題を抱えていました-特定の許可されたオリジン（ではない*）を追加しようとしたとき。

私は修正しなければならなかったことが判明

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

に

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

（URLの最後のスラに注意してください）

これが誰かを助けることを願っています