Question

我正在尝试从S3下载图像。但是我收到错误CORS。

我做了什么：

- 设置S3存储桶的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>PUT</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<ExposeHeader>Accept-Ranges</ExposeHeader>
<ExposeHeader>Content-Range</ExposeHeader>
<ExposeHeader>Content-Encoding</ExposeHeader>
<ExposeHeader>Content-Length</ExposeHeader>
<ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

- 我使用AWS控制台上传了一张图片

在html中加载图片：

<div id="my-node">
   <img id="image" src="path/to/s3/bucket/image.png" class="img-responsive"/>
</div>

- 要下载图片，我使用https://github.com/tsayen/dom-to-image下载

domtoimage.toBlob(document.getElementById('my-node'))
.then(function (blob) {
    window.saveAs(blob, 'my-node.png');
});

结果：我收到了错误

XMLHttpRequest无法加载path / to / s3 / bucket / image.png。没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。

我检查了图像，响应头不包括Access-Control-Allow-Origin（似乎S3没有包括响应中的CORS配置）

Accept-Ranges:bytes
Content-Length:124824
Content-Type:image/png
Date:Mon, 24 Apr 2017 17:27:48 GMT
ETag:"xxxxxxxx00000000"
Last-Modified:Mon, 24 Apr 2017 17:18:53 GMT
Server:AmazonS3
x-amz-id-2:xxxxxxxxxxxxxxxxx
x-amz-request-id:xxxxxxxxxxxx

非常感谢任何建议或建议

Answer 1

您的存储桶策略需要至少向公共用户授予s3:GetBucketCORS，例如：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetBucketCORS"
            ],
            "Resource": [
                "arn:aws:s3:::mybucketname"
            ]
        }
    ]
}

AWS S3存储桶：CORS配置

1 个答案: