CODEWITHSUNDEEP
javascriptnode.jsamazon-web-servicesamazon-s3cors
OliverJ90
OliverJ90

Reputation: 1321

CORS error on AWS S3 bucket upload

I have my AWS S3 bucket CORS configuration set up as follows 

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

And making a signed upload request in the browser:

function upload_file(file, signed_request, url){
    var xhr = new XMLHttpRequest();
    xhr.open("PUT", signed_request);
    xhr.setRequestHeader('x-amz-acl', 'public-read');
    xhr.onload = function() {
        if (xhr.status === 200) {
            $('#photo').css('background-image', "url('"+url+"')");
        }
    };
    xhr.onerror = function(err) {
        alert("Could not upload file.", err);
    };
    xhr.send(file);
}

But both chrome and firefox throw a Access-Control-Allow-Origin header not set error. Specifically in firefox: "(Reason: CORS header 'Access-Control-Allow-Origin' missing)."

Upvotes: 5

Views: 18817

Answers (2)

n8jadams
n8jadams

Reputation: 1184

Nowadays when running into this issue, it means you need to edit the Cross-origin resource sharing (CORS) configuration for the S3 Bucket.

In the AWS console:

  1. Navigate to S3
  2. Find your bucket name in the search
  3. Click the Permissions tab
  4. Find the Cross-origin resource sharing (CORS) section and click the "edit" button
  5. Edit the json, adding your domain's origin to the AllowedOrigins array and save the changes.

Screenshot: Screenshot

Upvotes: 2

hmd.ai
hmd.ai

Reputation: 1171

The Access-Control-Allow-Headers header does not allow wildcards. It must contain actual header names.

Look at preflight request in your network tab.The values in Access-Control-Request-Headers header must be included as AllowedHeader.

Upvotes: 2

Related Questions