web-dev-qa-db-ja.com

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

次の経由でファイルをアップロードしようとしています：

_console.log("not broken til here");
    scope.inputMemeIsFile=true;
    var bucket = new AWS.S3({params: {Bucket: 'townhall.images'}});
    file = image.file;
    console.log(file);

    var params = {Key: file.name, ContentType: file.type, Body: file};
      bucket.upload(params, function (err, data) {
        var result = err ? 'ERROR!' : 'UPLOADED.';
        console.log(result);
        console.log(err);
      });
_

ただし、次のエラーが発生しています。

_XMLHttpRequest cannot load https://s3.amazonaws.com/<BUCKETNAME>/favicon.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:5000' is therefore not allowed access.
_

進行中のエラー：Network Failure {message: "Network Failure", code: "NetworkingError", time: Tue Feb 17 2015 13:37:06 GMT-0500 (EST), region: "us-east-1", hostname: "s3.amazonaws.com"…}

私のCORSの設定は次のようになり、運のないいくつかのことを試しました。

_<?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>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
_

誰もが何が間違っているのか考えていますか？ 5〜6個の同様の投稿を見ましたが、誰も問題を解決できないようです。

javascriptamazon-s3uploadcors
24
John

ブラウザ経由でファイルをアップロードするには、Amazon S3バケットのCORSを設定し、ETag宣言を介して「ETag」ヘッダーを公開したことを確認する必要があります。

オープンなテスト構成から始めて、必要に応じて変更することをお勧めします。

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

次に、バケット許可とAWS構成（accessKeyId、secretAccessKey、およびregion）を確認します。これらはスニペットに存在しないためです。

テストのために、IAM管理コンソールに移動して、prefix-townhall-testという名前の新しいIAMユーザーを作成し、バケットへのアクセスを許可する次の簡単なポリシーでグループを作成します。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["s3:ListBucket"],
      "Resource": ["arn:aws:s3:::test-bucket-name"]
    },
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:DeleteObject"
      ],
      "Resource": ["arn:aws:s3:::test-bucket-name/*"]
    }
  ]
}

作成したユーザーがこのポリシーで新しいグループを使用していることを確認してください。

次に、Amazonで使用されるような簡単なテストスクリプトを作成します。

[〜＃〜] html [〜＃〜]

<input id="file-chooser" type="file" />
<button id="upload-button">Upload</button>
<p id="results"></p>

CODE（DOM対応）

// update credentials
var credentials = {accessKeyId: 'new accessKeyId', secretAccessKey: 'new secretAccessKey'};
AWS.config.update(credentials);
AWS.config.region = 'us-west-1';

// create bucket instance
var bucket = new AWS.S3({params: {Bucket: 'test-bucket-name'}});

var fileChooser = document.getElementById('file-chooser');
var button = document.getElementById('upload-button');
var results = document.getElementById('results');
button.addEventListener('click', function() {
    var file = fileChooser.files[0];
    if (file) {
        results.innerHTML = '';

        var params = {Key: file.name, ContentType: file.type, Body: file};
        bucket.upload(params, function (err, data) {
            results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
        });
    } else {
        results.innerHTML = 'Nothing to upload.';
    }
}, false);
40
jungy

Chromeなどの一部のブラウザーは、CORS要求に対してlocalhostまたは127.0.0.1をサポートしていません。

代わりに使用してみてください：http://lvh.me:5000/

詳細については、 https://stackoverflow.com/a/10892392/1464716 を参照してください。

8
Edu Lomeli

<AllowedOrigin>*</AllowedOrigin>、プロトコルなし。

効果がない場合-クライアント側に問題がある可能性があります。

2
ermouth

ワイルドカードを使用する代わりにOriginを指定しようとしましたか？過去にも同様の問題があったと確信しています。

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