我尝试使用客户端SDK直接上传到Amazon S3存储桶。我的代码基于以下帖子:http://www.cheynewallace.com/uploading-to-s3-with-angularjs/。我可以使用S3控制台上传和查看文件。但是当我尝试从客户端执行putObject时,我收到403错误。请帮我弄清楚我哪里出错了。
CORS设置:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
<ExposeHeader>x-amz-request-id</ExposeHeader>
<ExposeHeader>x-amz-id-2</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
<AllowedHeader>x-amz-acl</AllowedHeader>
</CORSRule>
</CORSConfiguration>
2. Bucket Policy
{
"Version": "2012-10-17",
"Id": "Policy1460109621028",
"Statement": [
{
"Sid": "Stmt1460109523730",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:PutObjectAcl",
"s3:PutObject"
],
"Resource": [
"arn:aws:s3:::zxcvbucketdemo123/*",
"arn:aws:s3:::zxcvbucketdemo123"
]
}
]
}
3. IAM policy
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": "s3:*",
"Resource": "*"
}
]
}
4. Controller.js
app.controller('DemoCtrl123', ['$scope', function($scope) {
$scope.sizeLimit = 10585760; // 10MB in Bytes
$scope.uploadProgress = 0;
$scope.creds={} ;
$scope.creds.bucket='zxcvbucketdemo123';
$scope.creds.access_key='xxxxxxxxxxxxxx';
$scope.creds.secret_key='yyyyyyyyyyyyyyyyyyyyy';
$scope.upload = function() {
console.log("inside amazon s3 controller upload function....");
AWS.config.update({ accessKeyId: $scope.creds.access_key, secretAccessKey: $scope.creds.secret_key });
AWS.config.region = 'us-west-2';
var bucket = new AWS.S3({ params: { Bucket: $scope.creds.bucket } });
console.log($scope.creds.bucket);
console.log(bucket);
if($scope.file) {
// Perform File Size Check First
/*var fileSize = Math.round(parseInt($scope.file.size));
console.log(filesize);
if (fileSize > $scope.sizeLimit) {
toastr.error('Sorry, your attachment is too big. <br/> Maximum ' + $scope.fileSizeLabel() + ' file attachment allowed','File Too Large');
return false;
}*/
// Prepend Unique String To Prevent Overwrites
var uniqueFileName = $scope.uniqueString() + '-' + $scope.file.name;
// var params = { Key: uniqueFileName, ContentType: $scope.file.type, Body: $scope.file, ServerSideEncryption: 'AES256' };
var params = { Key: uniqueFileName, ContentType: $scope.file.type, Body: $scope.file};
console.log(params);
console.log(uniqueFileName);
console.log($scope.file.type);
console.log($scope.file);
bucket.putObject(params, function(err, data) {
if(err) {
console.log("inside amazon s3 controller putobject error....");
toastr.error(err.message,err.code);
return false;
}
else {
// Upload Successfully Finished
console.log("inside amazon s3 controller upload succesful....");
toastr.success('File Uploaded Successfully', 'Done');
// Reset The Progress Bar
setTimeout(function() {
$scope.uploadProgress = 0;
$scope.$digest();
}, 4000);
}
})
.on('httpUploadProgress',function(progress) {
$scope.uploadProgress = Math.round(progress.loaded / progress.total * 100);
$scope.$digest();
});
}
else {
// No File Selected
toastr.error('Please select a file to upload');
}
}
$scope.fileSizeLabel = function() {
// Convert Bytes To MB
return Math.round($scope.sizeLimit / 1024 / 1024) + 'MB';
};
$scope.uniqueString = function() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 8; i++ ) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
}]);
答案 0 :(得分:2)
我添加:
<ExposeHeader>ETag</ExposeHeader>
<CORSRule>
内的解决了这个问题。