javascript - S3 从浏览器上传带有预签名 url 的图像

Question

我正在尝试从浏览器将数据上传到 s3 存储桶。我已经生成了一个预签名的 url，但我收到了 403 forbidden 响应。

我的服务器代码是

const s3 = new AWS.S3({
  accessKeyId: settings.resourceBucketKey,
  secretAccessKey: settings.resourceBucketSecret,
  region: 'eu-west-1'
})

const params = {
  Bucket: 'my-bucket',
  Key: 'photo.png',
  ContentType: 'image/png',
  ACL: 'authenticated-read',
}

const url = s3.getSignedUrl('putObject', params)

console.log(url)

我的客户端代码是(使用生成的 url)

const input = $('#myinput')

      input.on('change', (res) => {
        var theFormFile = $('#myinput').get()[0].files[0];

        $.ajax({
          url: url,
          type: 'PUT',
          contentType: 'image/png',
          processData: false,
          data: theFormFile,
        }).success(function(){
          alert('success')
        })
      }, false)

我已经在 bucket 上设置了 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>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

但我仍然收到 403 forbidden 的响应。我要上传的图片称为“photo.png”。我在这里遗漏了什么吗？

Answer 1

预签名 URL 的创建者(您)必须有权访问 S3 存储桶以上传文件。这在 S3 documentation 中有更 Eloquent 描述。 :

A pre-signed URL gives you access to the object identified in the URL, provided that the creator of the pre-signed URL has permissions to access that object. That is, if you receive a pre-signed URL to upload an object, you can upload the object only if the creator of the pre-signed URL has the necessary permissions to upload that object.

确保创建预签名 URL 的 IAM 用户具有必要的权限。