无法访问保存在Javascript代码桶中的图像

Question

我有一个django项目，可以将文件上传到AWS S3 bucket。例如，如果使用{%static%}标记在模板中呈现上传的文件和静态文件，则会正确显示它们。但是，当我想使用model_对象访问javascript代码中的图像时。形象url，图像不会显示。我检查了代码，获取了js代码中呈现的url，并将其粘贴到浏览器上，它给出了以下错误：

<Error>
<Code>AccessDenied</Code>
<Message>Query-string authentication requires the Signature, Expires and AWSAccessKeyId parameters</Message>
<RequestId>xxxx</RequestId><HostId>xxx</HostId>
</Error>

更多有用的信息：

用户上传一张图片，然后他可以裁剪图片。我使用Croppie，它是一个js库，使用图像的url，如下所示：

$('.div').croppie({
    url: '{{ model_object.image.url }}',
});

一切都在本地工作。这是AWS的一个问题，我显然不明白。

下面的solaris烟雾注释，我添加了这个桶策略到我的桶：

{
    "Version": "2012-10-17",
    "Id": "Policy1468082822770",
    "Statement": [
        {
            "Sid": "Stmt1468082812651",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::criptolibertad/*"
        }
    ]
}

然而，它仍然不起作用。我注意到在不起作用的模板中呈现的url看起来像这样：

https://criptolibertad.s3.amazonaws.com/Django/0_squashmigrations.jpeg?Signature=HFDdOYvrfqz5DG...

如果我直接从我的桶打开资源，url看起来像这样：

https://s3-us-west-2.amazonaws.com/criptolibertad/Django/0_squash迁移。jpeg？X-Amz-Date=201607。。。

我也右键点击文件夹，选择了公开以防万一。

任何建议都会有帮助。

Answer 1

好的，多亏了图图达贾霍和他在这个问题上的回答，我缩小了问题的范围，找到了问题和解决方案：

克洛皮。js试图将图像加载到HTML5画布中。克洛皮。js自动将crossorigin=“anonymous”添加到图像中。但图像缺少正确的CORS标题，因此画布被“污染”。

我发现了换短裙。js source和removingcrossorigin=“anonymous”起到了部分作用：图像已正确加载到画布中，但无法导出它并获得我需要发送到服务器的base64图像。

真正的解决方案是改变我的bucket CORS配置，如下所示：

为此：

顺便说一句。AWS留档不清楚AlloweHeader选项。

Answer 2

首先，上面的链接指向不同的路径，一个是文件Django/0_squashmigrations.jpeg另一个是Django/0_squashmigrations.jpeg。后者是一个不为我工作，它似乎缺少一个字符（空间？）；我根本无法访问那个文件（我得到一个访问错误）。我想那只是你的一个打字错误。

由于熟悉你的代码（如果你想修改链接，请告诉我），我模拟了图像上传，甚至将你的策略复制到了我的bucket中。

我注意到我的model_objecct.image.url与您的不同之处在于它包括AWSAccessKeyId如下：

> fs = FeralSpirit.objects.all()[1]
> print(fs.imagen.url)
https://so38134984.s3.amazonaws.com/OrillaLibertaria/Users/pavel/dev/temp/so38134984/rainbow_dash2.png?Signature=****&Expires=*****&AWSAccessKeyId=*******

示例中的链接只包含签名，因此您看到的错误消息非常合适。

事实上，我们可以访问上面的图像，而不需要任何查询字符串。

如果您试图删除查询字符串参数，因为这将是一个可公开访问的bucket，请尝试向Django设置中添加AWS\u QUERYSTRING\u AUTH=False。这将生成不带任何查询字符串参数的url：

> fs = FeralSpirit.objects.all()[1]
> fs.imagen.url
'https://so38134984.s3.amazonaws.com/OrillaLibertaria/Users/pavel/dev/temp/so38134984/rainbow_dash2.png'

当然，这仍然是公开的。