CODEWITHSUNDEEP
djangoamazon-web-servicesamazon-s3
Thomas Michael Plantin
Thomas Michael Plantin

Reputation: 112

Django AWS S3 - 400 "Bad Request" - Can't access image from bucket

I recently decided to merge the images used in my application from a static folder in my root directory to an AWS S3 bucket.

Unfortunately, I am getting this error when I open my app in a browser: localhost/:65 GET https://django-plantin-bugtracker-files.s3.amazonaws.com/profile_pics/aragorn_SztKYs6.jpg?AWSAccessKeyId=AKIA3KFS7YZNOMSRYG3O&Signature=fYWSQFdzTvtOF9OXAfw9yqfGyQc%3D&E

It is strange because I can access the image URL directly (for example https://django-plantin-bugtracker-files.s3.us-east-2.amazonaws.com/default.jpg), which leads me to believe that my app is just not accessing it properly.

I unblocked all public access on my S3 bucket and added these lines of codes to the following files:

In my app's settings.py I added:

AWS_STORAGE_BUCKET_NAME=config('AWS_S3_BUCKET_NAME')
AWS_ACCESS_KEY_ID = config('AWS_S3_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = config('AWS_S3_SECRET_ACCESS_KEY')

AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = None

DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

In my S3 bucket's Bucket Policy:

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::django-plantin-bugtracker-files/*"
        }
    ]
}

In my S3 bucket's CORS:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Does anyone know why my images won't appear? The webpage loads fine and there is no error from Django.

The images look like this:

Example of image not loaded

Upvotes: 0

Views: 1129

Answers (2)

Thomas Michael Plantin
Thomas Michael Plantin

Reputation: 112

I figured out what was wrong. I was missing this line of code in the settings.py file of my application folder. Adding it solved the problem and the images are now appearing.

AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME

Upvotes: 2

Marcin
Marcin

Reputation: 238199

I checked and your file is publicity available as expected:

curl https://django-plantin-bugtracker-files.s3.amazonaws.com/profile_pics/aragorn_SztKYs6.jpg

Accept-Ranges: bytes
Content-Type: image/jpeg
Content-Length: 17532

So this is not a problem with bucket policy or S3. It must be something specific to your application.

Upvotes: 0

Related Questions