38

JSONオブジェクトをAmazonS3に保存していて、そのデータをJavascriptのS3から直接ロードしたいと思います。私のGETはかなり一般的に見えます：

$.ajax({
    'type':'GET',
    'url':'http://s3.amazonaws.com/mybucketname/'+id,
    'dataType':'text',
    'success':function(msg) {
        alert(msg);
    }
});

次のエラーが発生します。

XMLHttpRequest cannot load http://s3.amazonaws.com/whatever/whatever. Origin http://mylocalhostname:9000 is not allowed by Access-Control-Allow-Origin.

curlを使用するか、ブラウザから直接そこに移動することで、S3からそのURLを取得できます。私は本当にこれらすべてのリクエストを自分のサーバーを介してプロキシする必要がありますか？

4

11 に答える 11

43

次のようなワイルドカード*を使用すると、S3は「Access-Control-Allow-Origin」ヘッダーを送信しません。

<AllowedOrigin>*</AllowedOrigin>

s3がAllowedOriginヘッダーを送信するように強制し、それでもコンテンツを任意のサイトからロードできるようにするには、次を使用します。

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>
于 2014-09-04T18:52:21.260 に答える
40

S3は、CORSファイルを使用したクロスドメインリクエストをサポートするようになりました。

あなたはここでより多くの情報を見つけることができます：

http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

と：

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

于 2012-10-08T13:14:21.933 に答える
6

たくさん検索-これはサンプルソリューションです：

http://blog.bignerdranch.com/1670-upload-directly-to-amazon-s3-with-support-for-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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
于 2013-11-25T15:08:48.827 に答える
5

同様の問題が発生しましたが、GETではなく、事前に署名されたS3POSTで発生しました。これは、この問題をグーグルで検索する人にとって役立つかもしれないと思いました。

一部のブラウザでは、Dropzone.js libが画像をS3バケット（事前に署名されたS3 POST）に直接アップロードできませんでした。奇妙な部分は、これが常に一部のコンピューターで発生しており、20回に1回の試行で発生していたことです。

1台のコンピューターで、Firefoxデバッガー（[ネットワーク]タブ）でエラーをキャプチャできます。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS request failed).

S3バケットのCORSをこれに更新すると、次のようになりました。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.myapp.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://www.app.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

重要な部分は、このS3が応答ヘッダーを<ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>公開しているおかげです。OPTIONSPOST

ここに画像の説明を入力してください

@ anas-alaoui、 @ joserose 、@equivalentのコラボレーション 作品

于 2016-05-26T15:25:29.477 に答える
3

jsonの代わりにjsonpリクエストを使用できます。詳細はこちらです。 http://api.jquery.com/jQuery.ajax/

于 2012-07-03T17:32:11.923 に答える
1

私は同じような問題に苦しんでいました。唯一の違いは、S3からAjaxを使用してファイルをプルし、それをサイトにロードしたかったことです。

たくさん検索した後、私はこのオプションをAjaxリクエストに追加することになりました。

xhrFields：{withCredentials：true}、

すべてを許可するCORSConfigurationがある限り、魅力のように機能しました。

それが役に立てば幸い。

于 2013-12-11T14:26:41.207 に答える
1 
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://*</AllowedOrigin>
        <AllowedOrigin>https://*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

このCORS構成は魅力のように機能しました

于 2019-10-04T10:38:09.767 に答える
0

これは私のヒントです：https ：//github.com/mozilla/pdf.js/issues/3150

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
    </CORSRule>
</CORSConfiguration>
于 2015-04-20T09:18:10.297 に答える
0

ダウンロードに時間がかかる大きなファイルがある場合、またはファイルが早期に切断される可能性がある場合は、MAXAGE構成を増やすことをお勧めします。メディアホスティングなどはこれを必要とします。ワイルドカードアクセス（任意のドメイン）の構成は最大10000秒でした。これは、接続が悪い場合でも、誰もが私のファイルをダウンロードする必要があるよりも安全に長くなるはずです。

<?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>10000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
于 2017-08-29T03:12:01.030 に答える
0

この問題に苦しんでいる人は、他の人が言うように、CORS構成に次の行を追加して、S3にCORSヘッダーで応答するように強制する必要があります。

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

ただし、要求されたリソースの古いヘッダーが保存されるため、ブラウザのファイルキャッシュをクリアする必要があります。Chromeで、 [閲覧データの消去]オプションを見つけて、ファイルキャッシュを消去することを選択します。ハードリロードは特定のファイルをクリアしません。現在のサイトのファイルキャッシュのみをクリアしたい場合は、この回答でその方法を説明します。

これが私にとっての落とし穴でした。

于 2019-02-10T02:57:30.957 に答える
0

私の場合、バケット「myBucket」からいくつかのリソースを取得したいと思います。

S3クライアント側では、AWSS3がJSONをサポートしてCORSポリシーを設定するようになりました[参照]

バケットポリシー：

[
    {
        "AllowedHeaders": [
            "*",
            "x-amz-*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

サーバー側/クライアント側（JQUERY Ajax）

$.ajax({
    type: "GET", 
    url: "https://myBucket/myObject",
});​​​​​​​​​​​​​​​

それを試してみてください！、それが役立つことを願っています！

于 2020-11-12T02:44:02.670 に答える