Question

81

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

rated 0 times [ 87] [ 6] / answers: 1 / hits: 54517 / 9 Years ago, tue, february 17, 2015, 12:00:00

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 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…}

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>

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dallasb

Add To Favorites

Follow

Total Points: 657

Total Questions: 98

Total Answers: 97

Location: Luxembourg

Member since Tue, Jan 25, 2022

2 Years ago

answered 9 Years ago austonjuancarlosb · Accepted Answer

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