Getting 403 error inspite of adding AWS static file-path to CORS_ORIGIN_WHITELIST django-cors-headers

Question

I am using django-summernote to my text-field. This should make my text-field look somewhat like the image below

Now the static files for the above above are stored in my AWS S3 bucket. I am getting a 403 error in the browsers console and below is how my text field looks like right now

The 403 error in the console looks like below

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://some_bucket_66d.s3.amazonaws.com/static/summernote/font/summernote.woff?1d9aeaaff0a8939558a45be6cd52cd4c. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More] downloadable font: download failed (font-family: "summernote" style:normal weight:400 stretch:100 src index:1): bad URI or cross-site access not allowed source: https://some_bucket_6d.s3.amazonaws.com/static/summernote/font/summernote.woff?1d9aeaaff0a8939558a45be6cd52cd4c

So to solve this error I did pip install django-cors-headers

Added

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
]

Added it to my middleware

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
...
]

And added the below 3 links to my whitlist in my django settings. I don't know what http://127.0.0.1:9000 is for but I just let it be there anyways as it was in the https://pypi.org/project/django-cors-headers/ page

CORS_ORIGIN_WHITELIST = [
    "https://some_bucket_66d.s3.amazonaws.com", #This is the bucket path as you see in the error above
    "http://localhost:8080",
    "http://127.0.0.1:9000"
]

I am still getting the same error even after whitelisting it in Django Cors what am I doing wrong and how can I fix it

Tried the solution suggested by @jusrDare. NOw the error message has changed to the below

downloadable font: download failed (font-family: "summernote" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: https://some_bucket_66d.s3.amazonaws.com/static/summernote/font/summernote.woff?1d9aeaaff0a8939558a45be6cd52cd4c

Also if you don't want to do AllowedOrigin as * you can try the below code

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://www.your-site.com</AllowedOrigin>
    <AllowedOrigin>https://www.your-site.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

Any way both of them are giving me the same error

Adding CORS allows other sites to access your content; it doesn't allow you to access other sites' content. So none of that will have any affect. I don't know anything about this package, but you likely have an installation or configuration error somewhere. If you think there is a bug in the package, you can file an issue on the Github page. — Kevin Christopher Henry

justDare justDare · Accepted Answer · 2019-05-18T19:07:11

Same error, will be back if I can figure it out today...

Back!

Tweaking the CORS header in AWS seemed to do the trick.

Replace the default CORS CONFIGURATION in your bucket permissions with:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

All I added from the default settings was the Conten-* Allowed header tag.

Not sure why this works EXACTLY, hopefully someone else can chime in.

Getting 403 error inspite of adding AWS static file-path to CORS_ORIGIN_WHITELIST django-cors-headers

5 Answers