Amazon s3 Javascript- No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

Am trying to upload my file via:

console.log(\"not broken til here\");
    scope.inputMemeIsFile=true;
    var bucket = new AWS.S3({params: {Bucket: \'townh         


        

Answer 1

Some browsers, such as Chrome, do not support localhost or 127.0.0.1 for CORS requests.

Try using instead: http://lvh.me:5000/

See https://stackoverflow.com/a/10892392/1464716 for more.

Answer 2

Try <AllowedOrigin>*</AllowedOrigin>, without protocol.

If it has no effect – you probably have problem on client side.

Answer 3

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>

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

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>

CODE (on DOM ready)

// 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 4

Have you tried specifying your origin instead of using wildcard. I'm pretty sure we had similar problems in the past.

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