S3 Ajax CORS错误

Question

I have been trying to solve this for the past few hours.

I am using the Heroku S3 python app direct upload method outlined here.

Basically, I have a file input which I get the file from with

$('#files').on('change', function() {
    var files = document.getElementById("files").files;
    var file = files[0];
    if(!file){
       return alert("No file selected.");
    }
    getSignedRequest(file);
})

In getSignedRequest, I make a request to my sign_s3 route

function getSignedRequest(file){
          var xhr = new XMLHttpRequest();
          xhr.open("GET", "/sign_s3?file_name="+file.name+"&file_type="+file.type);
          xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
              if(xhr.status === 200){
                var response = JSON.parse(xhr.responseText);
                uploadFile(file, response.data, response.url);
              }
              else{
                alert("Could not get signed URL.");
              }
            }
          };
          xhr.send();
        }

The sign_s3 route is defined as follows

@main.route('/sign_s3/')
def sign_s3():
  S3_BUCKET = os.environ.get('S3_BUCKET')

  file_name = request.args.get('file_name')
  file_type = request.args.get('file_type')

  s3 = boto3.client('s3')

  presigned_post = s3.generate_presigned_post(
    Bucket = S3_BUCKET,
    Key = file_name,
    Fields = {"acl": "public-read", "Content-Type": file_type},
    Conditions = [
      {"acl": "public-read"},
      {"Content-Type": file_type}
    ],
    ExpiresIn = 3600
  )

  return json.dumps({
    'data': presigned_post,
    'url': 'https://%s.s3.amazonaws.com/%s' % (S3_BUCKET, file_name)
  })

The uploadFile function is defined as follows

function uploadFile(file, s3Data, url){
          var xhr = new XMLHttpRequest();
          xhr.open("POST", s3Data.url);

          var postData = new FormData();
          for(key in s3Data.fields){
            postData.append(key, s3Data.fields[key]);
          }
          postData.append('file', file);
          console.log(file);

          xhr.onreadystatechange = function() {
            if(xhr.readyState === 4){
              if(xhr.status === 200 || xhr.status === 204){
                document.getElementById("preview").src = url;
                document.getElementById("avatar-url").value = url;
              }
              else{
                alert("Could not upload file.");
              }
           }
          };
          xhr.send(postData);
        }
      });

My bucket CORS config is as follows

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

But I keep getting the following error upon fileUpload

Failed to load https://mhealth-beta-1.s3.amazonaws.com/: Redirect from 'https://mhealth-beta-1.s3.amazonaws.com/' to 'https://mhealth-beta-1.s3-us-west-2.amazonaws.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access.

Answer 1

The error is mentioning a redirect. I'm not familiar with how 302 redirects interact with CORS but try this:

In your backend route, use the dns name including the region.

so 'https://%s.s3.%s.amazonaws.com/%s' % (S3_BUCKET, region, file_name)