無法訪問使用Javascript代碼保存在存儲桶中的圖像

我有一個將文件上傳到AWS S3存儲桶的django項目。例如，如果使用{% static %}標記在模板中呈現上傳的文件和靜態文件，則它們將正確顯示。但是，當我想使用model_object.image.url訪問javascript代碼中的圖像時，圖像不顯示。我檢查了代碼，都認爲是在JS代碼呈現並粘貼它在瀏覽器的URL，它給了我這個錯誤：無法訪問使用Javascript代碼保存在存儲桶中的圖像

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

一些更多的信息，可能是有用的：

的用戶上傳圖像，然後他可以裁剪圖像。我用Croppie這一點，它是這樣使用的圖像的URL一個JS庫：

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

一切本地工作。這是AWS的一個問題，我顯然不明白。

繼solarissmoke評論，我說這個水桶的政策，我的水桶：

{ 
    "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 ...

，網址如下：

https://s3-us-west-2.amazonaws.com/criptolibertad/Django/0_squash+migrations.jpeg?X-Amz-Date=201607 ...

我還權點擊該文件夾並選擇Make Public以防萬一。

任何意見將有所幫助。

來源

2016-07-09 alejoss

看起來您的S3存儲桶/對象不是公用的，他們需要在沒有身份驗證的情況下訪問它們。看到[這個問題]（http://stackoverflow.com/questions/19176926/how-to-make-all-objects-in-aws-s3-bucket-public-by-default）的一些想法。 – solarissmoke

@solarissmoke感謝您的評論，我現在添加了一項政策。但它仍然不起作用。 – alejoss

首先，上面的鏈接指向不同的路徑，一個是文件Django/0_squash+migrations.jpeg另一個是Django/0_squashmigrations.jpeg。後者是不適合我的人，它似乎缺少+字符（空間？）;我根本無法訪問該文件（我遇到訪問錯誤）。我會假設你只是一個錯字。

熟悉your code（讓我知道如果你想鏈接編輯），我已經模擬了圖片上傳，甚至複製你的政策到我的桶。

我注意到的是，我的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=*******

在您的示例的鏈接僅包括簽名，所以你看到錯誤消息是非常合適的。

事實上，我們可以在沒有任何查詢字符串的情況下訪問the image above。

如果您試圖刪除查詢字符串參數，因爲這將是一個可公開訪問的存儲桶，請嘗試將AWS_QUERYSTRING_AUTH = False添加到您的Django設置中。這應該會生成沒有任何查詢字符串參數的網址：

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

當然這仍然是公開的。

來源

2016-07-10 07:09:15 tutuDajuju

謝謝你的回答，我剛剛編輯並實現了這個問題。 – alejoss

你現在的問題跟S3沒什麼關係，我建議你編輯回答這個問題，然後問一個新問題。 – tutuDajuju

爲了開始你的工作，檢查Chrome開發者工具日誌中是否存在任何錯誤 – tutuDajuju

好，感謝tutuDajajo和他的this問題，我問的時候我縮小了問題的答案，我發現問題和解決方案：

Croppie.js試圖將圖像加載到HTML5帆布。 Croppie.js自動將crossorigin="anonymous"添加到圖像中。但該圖像缺少正確的CORS標題，因此畫布「受污染」。

我發現改變Croppie.js源代碼並刪除crossorigin="anonymous"部分工作：圖像正確加載到畫布，但它不可能導出它，並得到我需要發送到服務器的base64圖像。

真正的解決辦法是改變我鬥CORS配置，從這個：

<AllowedHeader>Authorization</AllowedHeader>

這樣：

<AllowedHeader>*</AllowedHeader>

BTW。 AWS文檔不清楚AllowedHeader選項。

來源

2016-07-15 20:21:54 alejoss

無法訪問使用Javascript代碼保存在存儲桶中的圖像

回答

相關問題