S3 Ajax CORSエラー

Question

私は過去数時間この問題を解決しようとしています。

私はhereの輪郭を描いたHeroku S3 pythonアプリの直接アップロード方法を使用しています。

基本的に、私は私が

getSignedRequestで

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

でからファイルを取得するファイルの入力を持って、私は次のように私のsign_s3ルート

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

への要求がsign_s3ルートが定義されていることを確認

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

uploadFile関数はd

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

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

を次のように私のバケットCORSの設定があるしかし、私はファイルアップロード

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

時に、次のエラーを取得中にエラーがリダイレクトを言及している。維持を次のようにefined私は302リダイレクトがCORSとどのように対話するかに精通していませんが、これを試してみてください：

バックエンドルートでは、を含むDNS名を使用してください。

ので'https://%s.s3.%s.amazonaws.com/%s' % (S3_BUCKET, region, file_name)良いキャッチがある