Django hosting static files in AWS S3 causing CORS error when trying to access admin font files

user_5579011 0
Viewed 1018

I setup Django to store all static files on S3 and with the "collectstatic" command, all the admin files where copied and when I visit the admin site the CSS and JS files are sourced from the S3 bucket correctly. For example:

https://bucket.s3.amazonaws.com/static/admin/css/base.css
https://bucket.s3.amazonaws.com/static/admin/js/vendor/jquery/jquery.js

But when it tries to access the Font files .woff I get the following error:

Access to font at 'https://bucket.s3.amazonaws.com/static/admin/fonts/Roboto-Light-webfont.woff' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

It's weird that it gives me access to all the files except the font files:

enter image description here

django-rest-framework amazon-s3 django-admin django
2 Answers

Configuring the following in S3 Bucket Permissions > CORS fixed the issue.

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ]
    }
]
user_25037850

I remember i faced this issue before with Google Cloud Storage.

You have to make your bucket allow origin cross to your domain.

user_133436950
Related