设想：
开发网站的博客功能（Angular + Firebase + Aws S3 +ng-文件上传 https://github.com/danialfarid/ng-file-upload#s3)
将图像上传到 S3 进行存储，并将 url 存储在 firebase 中，以便在渲染博客文章时调用
Problem
-
- 403 错误上传时访问被拒绝 - 当请求标头中的 acl 为“公共读取”时
- “私人”作品 - 意味着它们上传但不在页面上呈现
（* 但通过手动更改图像以使其在 Aws S3 存储桶中公开，图像将在博客中呈现*）
- 兜圈子试图找出问题所在
这是代码
// 政策文件
$scope.policy = {
"expiration": "2020-01-01T00:00:00Z",
"conditions": [
{"bucket": "my-bucket-name"},
["starts-with", "$key", ""],
{"acl": 'public-read'},
{"success_action_redirect":"#"},
["starts-with", "$Content-Type", ""],
["starts-with", "$filename", ""],
["content-length-range", 0, 524288000]
]
};
// Upload method and parameters
Upload.upload({
url: 'https://my-bucket-name.s3.amazonaws.com/',
method: 'POST',
fields: {
key: file.name,
AWSAccessKeyId: 'MY-ACCESS-KEY,
acl: 'public-read',
success_action_redirect: "#",
policy: myPolicy, // Base64 encoded
signature: mySignature,
"Content-Type": file.type != '' ? file.type : 'application/octet-stream',
filename: file.name
},
file: file
})
// 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>`
` <AllowedMethod>HEAD</AllowedMethod>`
`<MaxAgeSeconds>3000</MaxAgeSeconds>`
` <AllowedHeader>*</AllowedHeader>`
` </CORSRule>`
`</CORSConfiguration>`
// Bucket Policy
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "UploadFile",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::MY-ID:user/MY-USERNAME"
},
"Action": [
"s3:GetObject",
"s3:PutObject"
],
"Resource": "arn:aws:s3:::my-bucket-name/*"
},
{
"Sid": "crossdomainAccess",
"Effect": "Allow",
"Principal": "*", // there is asterik here just not showing up in this comment
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-bucket-name/crossdomain.xml"
}
]
}
