Amazon s3 Javascript-请求的资源上不存在“Access-Control-Allow-Origin"标头 [英] Amazon s3 Javascript- No 'Access-Control-Allow-Origin' header is present on the requested resource

问题描述

我正在尝试通过以下方式上传我的文件:

Am trying to upload my file via:

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);
      });

但是，我收到以下错误:

However, am getting the following error:

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.

with the procedureingError: Network Failure {message: "Network Failure", code: "NetworkingError", time: Tue Feb 17 2015 13:37:06 GMT-0500 (EST), region: "us-east-1", 主机名: "s3.amazonaws.com"...}

with the 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 配置如下所示，我尝试了几件事但没有成功.

My CORS config looks like the following and I have tried a couple things with no luck.

<?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 篇类似的帖子，但似乎没有人能够解决问题.

Anyone have any idea whats wrong? I've looked at 5-6 similar posts but no one seems to be able to solve the problem.

推荐答案

为了通过浏览器上传文件，您应确保已为 Amazon S3 存储桶配置 CORS 并通过 ETag 声明公开ETag"标头.

In order to upload files via browser, you should ensure that you have configured CORS for your Amazon S3 bucket and exposed the "ETag" header via the ETag declaration.

我建议你从一个开放的测试配置开始，然后根据你的需要修改它:

I would suggest you start with an open test configuration and then modifying it to your needs:

<?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)，因为没有其中一些出现在您的代码段中.

Then check your bucket permissions and your AWS configuration (accessKeyId, secretAccessKey, and region) since none of these are present in your snippet.

要进行测试，请转到您的 IAM 管理控制台并创建一个名为 prefix-townhall-test 的新 IAM 用户，然后使用此授予存储桶访问权限的简单策略创建一个组:

For testing, go to your IAM Management Console and create a new IAM user named prefix-townhall-test then create a group with this simple policy that grants access to a bucket:

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

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

Make sure the user you created is using the new group with this policy.

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

Now create a simple test script like the one used on amazon this:

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);

这篇关于Amazon s3 Javascript-请求的资源上不存在“Access-Control-Allow-Origin"标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！