直接上传到 S3

Question

I tried very hard to implement this tutorial on my Django project but didn't succeed. I think that the function I use to sign the post is not working properly. This my function :

def sign_s3(request,*args, **kwargs):
  S3_BUCKET = getattr(settings, 'FILEMANAGER_AWS_S3_BUCKET_NAME')

  file_name = request.GET.get('file_name')
  file_type = request.GET.get('file_type')

  s3 = boto3.client('s3', 
                    config = S3ClientCfg(signature_version = 's3v4'),
                    aws_access_key_id=AWS_ACCESS_KEY_ID,
                    aws_secret_access_key=AWS_SECRET_ACCESS_KEY,
                    )
  # s3 = get_aws_s3_client()

  presigned_post = s3.generate_presigned_post(
    Bucket = S3_BUCKET,
    Key = file_name,
    Fields = {"acl": "public-read", "Content-Type": file_type},
    Conditions = [
      {"acl": "public-read"},
      {"Content-Type": file_type}
    ],
    ExpiresIn = 3600
  )
  response_dict = {
    'data': presigned_post,
    'url': 'https://%s.s3.amazonaws.com/%s' % (S3_BUCKET, file_name)
  }
  mimetype = 'application/json'
  return HttpResponse(json.dumps(response_dict), mimetype)

Actually, when I look into the web console I see :

Cross-Origin Request Blocked. (Reason: CORS request did not succeed)

Answer 1

Actually I found out what is the problem. In my signature I mentioned that the URL will expire in 3600s. You have to signal this in the CORS as well.

My Bucket CORS should be as bellow :

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3600</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Answer 2

Check the CORS configuration of your S3 bucket, CORS Configuration can be found in the permissions tab of your S3 bucket in the AWS console.

You will probably see the default:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

You will need to update this to allow your website (www.example.com) to POST/PUT: https://docs.aws.amazon.com/AmazonS3/latest/API/RESTBucketPUTcors.html

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
<CORSRule>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>

    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>

    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>