バケツに保存された画像にJavaScriptでアクセスできません。

Question

ファイルをAWS S3バケットにアップロードするdjangoプロジェクトがあります。アップロードされたファイルとスタティックファイルは、たとえば{% static %}タグを使用してテンプレートにレンダリングされた場合、正しく表示されます。しかし、model_object.image.urlを使用してJavaScriptコードで画像にアクセスする場合、画像は表示されません。私はそれが私にこのエラーを与え、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> 

役に立つかもしれないいくつかのより多くの情報：

をユーザーが画像をアップロードした後、画像をトリミングすることができます。

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

すべてがローカルに動作します。私はそれがこのような画像のURLを使用するJSライブラリで、このためにCroppieを使用しています。 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 ...

私はバケツから直接リソースを開いた場合、URLは次のようになります。私も右

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

フォルダをクリックし、ちょうどの場合のためにMake Publicを選択しました。

アドバイスは役に立ちます。

Answer 1

まず、上記のリンクは異なるパスを指し、1つはファイルDjango/0_squash+migrations.jpeg、もう1つは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設定に追加してみてください。これにより、クエリ文字列パラメータを持たないURLが生成されます。

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

もちろん、まだ公然とアクセス可能です。

Croppie.js HTML5にイメージをロードしようとしていた。

Answer 2

[OK]を、私は問題を絞り込んときに私は尋ねたtutuDajajoとthis問題の彼の答えのおかげで、私は、問題と解決策が見つかりますキャンバス。 Croppie.jsは自動的にcrossorigin="anonymous"を画像に追加しました。しかし、画像には正しいCORSヘッダーがないため、キャンバスは「汚れていた」。

Croppie.jsのソースを変更してcrossorigin="anonymous"を削除したことが分かりました。イメージが正しくキャンバスに読み込まれましたが、エクスポートしてサーバーに送信するのに必要なBase64イメージを取得できませんでした。これに

<AllowedHeader>Authorization</AllowedHeader>

：ところで

<AllowedHeader>*</AllowedHeader>

真の解決策は、このことから、私のバケットCORSの設定を変更することでした。 AllowedHeaderオプションについてのAWSのドキュメントは明確ではありません。