2014-04-09 87 views
2

我試圖在Ajax調用上傳圖片到Amazon S3,但得到錯誤,如:無法上傳到Amazon S3圖像中的Ajax調用

的XmlHttpRequest無法加載https://bucketname.s3.amazonaws.com/。否'訪問控制 -
Allow_Origin'標題出現在請求的資源上。因此不允許原產地'null'訪問。

我的JavaScript是這樣的:

var xmlhttp = XmlHttpRequesr();  
var file = document.getElementById('file').files[0];   
var fd = new FormData();  
var key = "events/" + (new Date).getTime() + '-' + file.name;  
POLICY_JSON = {"expiration": "20020-01-01T00:00:00Z","conditions": [ {"bucket": "s3-bucket"}, 
["starts-with", "$key", ""], {"acl": "private"},{"success_action_redirect": "LOCALHOST"}, 
["starts-with", "$Content-Type", ""], ["content-length-range", 0, 1048576] ] };  
var secret = this.get('key');  
var policyBase64 = window.btoa(JSON.stringify(POLICY_JSON));  
console.log (policyBase64);  
var signature = b64_hmac_sha1(secret, policyBase64);  
b64_hmac_sha1(secret, policyBase64);  
fd.append('key', 'uploads/${filename}');  
fd.append('acl', 'private');  
fd.append('Content-Type', file.type);  
fd.append('AWSAccessKeyId', key);  
fd.append('policy', policyBase64);  
fd.append('signature',signature);  
fd.append("file",file); xmlhttp.open('POST', Url, true); xmlhttp.send(fd); } 

誰能幫我解決這個問題呢?

回答

1

希望你已經得到了這個地方。如果沒有,我可以提供一些幫助。我剛剛開始惹惱亞馬遜S3,但它接近我,你需要設置您的訪問控制設置。

https://console.aws.amazon.com/s3/home?region=us-east-1

然後點擊你的水桶。然後點擊屬性。

您必須設置存儲桶策略和CORS策略。

我開始時將桶策略設置爲admin,並允許我的上傳工作。然後找出你需要做的事情的最低限度,這樣你就不會離開大門。

CORS策略也很重要。我擔心我太鬆,不太確定。但無論如何它的工作原理:

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

雅謝謝你,我已經修復這個錯誤,我想知道的一件事是上傳它的狀態代碼爲303後,我該如何解決這個問題? – Karthik