I am hosting static files for a Django web application in AWS S3 using the Python storages package.
The application's static assets load in Firefox, but in Chrome, the image files will not load. I am running the local Django development server.
The error I am getting for the image file is:
Access to XMLHttpRequest at 'https://bucket.s3.amazonaws.com/static/svg/parts/part1.svg' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
My cors configuration for the AWS bucket is the following:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
I am only having issues with the image files. JavaScript, CSS, and webfont files (Fontawesome) are all loading fine in Chrome, it's just .svg and .png files that aren't loading and that I am getting the error for.
All of this works fine in Firefox with all images loading from AWS S3. I have tried the following settings in Django:
AWS_S3_SECURE_URLS = True
AWS_S3_SECURE_URLS = False
I have verified the the URLs in the browser are rendering as either http or https depending on the boolean value. Neither of these settings makes a difference in Chrome.
I am using the corsheaders package in Django and have the following set in settings.py:
CORS_ORIGIN_ALLOW_ALL = True
This appears to be a known issue with Chromium and WebKit browsers, but there isn't much information beyond what I have already tried to get this to work.
I would appreciate and suggestions. Thanks!
