javascript - 通过JS在S3存储桶上上传图片时，消息显示访问被拒绝的错误

Question

AWS.config.update({
  region: bucketRegion,

  credentials: new AWS.CognitoIdentityCredentials({
    IdentityPoolId: IdentityPoolId
  })
});
    function upload_image(id){
    var files = document.getElementById(id).files;
        if (!files.length) {
          return alert("Please choose a file to upload first.");
        }
        var file = files[0];
        var fileName = file.name;
        var albumPhotosKey = encodeURIComponent(albumBucketName) + "//";
        var photoKey = albumPhotosKey + fileName;

      // Use S3 ManagedUpload class as it supports multipart uploads
        var upload = new AWS.S3.ManagedUpload({
          params: {
            Bucket: albumBucketName,
            Key: photoKey,
            Body: file,
            ACL: "public-read"
          }
        });

      var promise = upload.promise();
      promise.then(
        function(data) {
          alert("Successfully uploaded photo.");
          viewAlbum(albumName);
        },
        function(err) {
          console.log(err)
          return alert("There was an error uploading your photo: ", err.message);
        }
      );}

通过 JS 在 S3 存储桶上上传图像时，消息显示访问被拒绝的错误。浏览器控制台错误（[HTTP/1.1 403 Forbidden 2156ms]）。所有存储桶设置都是公开的。**

Answer 1

尝试将此添加到您的 CORS 规则到您的策略中的存储桶名称 -> 权限 -> CORS 配置

<CORSRule>
    <AllowedOrigin>localhost:3000</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>