403 при загрузке с ng-file-upload + acl: public-read (angular + firebase + приложение Aws S3) acl: личные закачки в порядке

Сценарий:

функция блога для сайта dev (angular + firebase + Aws S3 + ng-file-upload)

загрузка изображений на S3 для хранения и хранения URL-адреса в firebase для вызова при рендеринге блога.

Проблема  -

  • Ошибка 403 Доступ запрещен при загрузке - когда acl в заголовке запроса является "общедоступным"
  • 'private' works - означает, что они загружаются, но не отображаются на странице

(* но с ручным изменением изображения, чтобы сделать паутину в ковше 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"
    }
]
}

Ответ 1

Я также ищу решение для загрузки/отображения изображений с использованием firebase. Я слышал, что ионный является хорошим вариантом, как вы думаете?