使用Angular JS從Amazon S3專用存儲桶檢索圖像

Question

我正在為我的網站之一使用Angular JS和WEB API。 根據網站的要求，我正在使用Amazon S3將圖像存儲在存儲桶中。

我正在使用WEB API使用accesskey和secretaccess密鑰在Amazon S3存儲桶中動態上傳圖像。

但是現在我想使用Angular JS在網站上顯示那些上傳的圖像（不是一次全部顯示）。 請注意，存儲桶不是公共的。

任何人都可以按照分步指南共享確切的代碼，以使用Angular JS從Amazon S3檢索圖像嗎？

編輯（新添加）

根據響應，我添加了以下代碼：-

$scope.retrieveImage = function()
{
   AWS.config.update({
            accessKeyId: "MyAccessKey", secretAccessKey: "MySecretKey"
        });

   var bucket = new AWS.S3({ params: { Bucket: "MyBucket" } });

   bucket.getObject({ Key: 'Datetime.png' }, function (err, file) {
     $scope.imgUrl = "";
   });
}

我現在收到以下錯誤：-

對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問源' http：// localhost：PortNumber '。 響應的HTTP狀態碼為403。

我在MyBucket的權限內添加了以下CORS配置：-

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

請讓我知道該怎么做？

解決方案：-將以下CORS標記修改為<AllowedHeader>*</AllowedHeader>就像魅力一樣。 感謝您的所有回復。

Answer 1

AWS提供了一個完整的示例，說明如何使用S3在網站上保存相冊。 它包括添加，刪除圖像和相冊。

http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

希望能幫助到你。