Unable to get Images from AWS-S3 bucket in django-app? - django

Question

I'm using AWS-S3 to store my users' profile images. I've repeated this process 7-8 times but when I open my app on local machine(I've not deployed it yet) the user profile images aren't there and it shows the alt='not found' in place of images.
I've made a user in IAM and a bucket in S3 same as in this tutorial nearly 5 times but there's no way I'm getting the images.
Also when I right click on any image in my app and go into the image location I'm getting this in my browser.
This XML file does not appear to have any style information associated with it. The document tree is shown below.
AccessDeniedAccess Denied6683BC64F8FCAB0CE2foYctY9f7GMW+VI64vr3rRfMPrXXGfscryk3Eqo7meEtenXCLSa4kGYnQBJV6qDG9AdBVVgR8=
Here's my settings.py file
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
STATIC_DIR = os.path.join(BASE_DIR,'static')
MEDIA_DIR = os.path.join(BASE_DIR,'myblog/media')
SECRET_KEY = os.environ.get('SECRET_KEY')
DEBUG = True
ALLOWED_HOSTS = []
INSTALLED_APPS = [
'blogapp.apps.BlogappConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'storages'
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'myblog.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR,],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'myblog.wsgi.application'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
'OPTIONS':{
'max_similarity': 1,
}
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'blogapp/static'),
]
MEDIA_URL = '/media/'
MEDIA_ROOT = MEDIA_DIR
LOGIN_REDIRECT_URL = 'blogapp:post_list'
LOGIN_URL = 'login'
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = os.environ.get('EMAIL_USER')
EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_PASS')
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = 'djangoblogapp'
AWS_LOCATION = 'static'
AWS_QUERYSTRING_AUTH = False
AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = None
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
In absence of S3 the app works fine but using AWS the images aren't getting loaded. I've downloaded boto3 and django-storages and using django 2.2.

Answer 1

Sounds like a CORS issue from the S3 side, see the docs from AWS. You will need to have a CORS configuration for the bucket to allow non-S3-console sites to see the files (you are getting a fairly generic XML empty response).
You will need to go to the permissions tab for your bucket, then CORS configuration, and enter something like the policies from the link, eg a very basic one that should allow you to use your images as you want would look like:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
</CORSRule>
</CORSConfiguration>
but if you need something more sophisticated/limiting then the docs there are pretty good.