使用 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

希望对你有帮助。