亚马逊s3 Javascript-请求的资源上没有"Access-Control-Allow-Origin"标头

Question

我试图通过以下方式上传我的文件:

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.

与proceedingError: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个类似的帖子,但似乎没有人能够解决问题.

Answer 1

要通过浏览器上传文件,您应确保已为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管理控制台并创建一个名为的新IAM用户,prefix-townhall-test然后创建一个具有此简单策略的组,该策略授予对存储桶的访问权限:

{
  "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/*"]
    }
  ]
}

确保您创建的用户正在使用具有此策略的新组.

现在创建一个简单的测试脚本,就像在亚马逊上使用的那样:

HTML

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

代码(在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);

Answer 2

某些浏览器(如Chrome)不支持localhost或不支持127.0.0.1CORS请求.

请尝试使用: http://lvh.me:5000/

有关更多信息,请参阅/sf/answers/762467471/.

Answer 3

目前的答案已经相当过时了。那么我的分享如下：

\n

首先，您需要在 AWS S3 存储桶上设置 CORS

\n

[\n    {\n        "AllowedHeaders": [\n            "*"\n        ],\n        "AllowedMethods": [\n            "GET",\n            "PUT",\n            "POST",\n            "DELETE",\n            "HEAD"\n        ],\n        "AllowedOrigins": [\n            "http://*",\n            "https://*"\n        ],\n        "ExposeHeaders": [\n            "Access-Control-Allow-Origin",\n            "ETag"\n        ],\n        "MaxAgeSeconds": 3000\n    }\n]\n

\n

只是关于 S3 的 cors 的注释。应用策略时，存储桶中已有的文件不会更新。因此，请确保仅将 CORS 策略应用于新存储桶，或者在应用策略后重新添加内容。旧内容不会受到新 CORS 政策的影响

\n

亚马逊S3如何评估CORS？

\n

\n
• 请求的\xc2\xa0Origin\xc2\xa0标头必须与\xc2\xa0AllowedOrigin\xc2\xa0元素匹配。
\n
• 请求方法（例如，GET 或 PUT）或 \xc2\xa0Access-Control-Request-Method\xc2\xa0header（在预检情况下）\xc2\xa0OPTIONS\xc2\xa0request 必须是 \xc2\xa0AllowedMethod\ 之一xc2\xa0 元素。
\n
• 预检请求中请求的\xc2\xa0Access-Control-Request-Headers\xc2\xa0header 中列出的每个标头必须与\xc2\xa0AllowedHeader\xc2\xa0element 匹配。
\n

\n

对于最后一步，您还需要清除浏览器上的缓存，因为浏览器可能会缓存之前的飞行前请求

\n