[Django]-Wagtail admin icons disappear when running collectstatic and putting everything on S3

by

5👍

✅

This happens because Wagtail uses an icon font, and current browsers don’t allow loading fonts from remote domains unless they include valid CORS HTTP headers. You can configure the django-storages S3 backend to add the appropriate headers by adding the following lines to your settings file:

AWS_HEADERS = {
    'Access-Control-Allow-Origin': '*'
}

and re-running ./manage.py collectstatic. See https://github.com/wagtail/wagtail/issues/633#issuecomment-55935529 for some additional notes.

👤gasman

1👍

I ran into this issue too. Since v1.9 of django-storages, it has used boto3 instead of boto. The “AWS_HEADERS” fix by gasman does not work for boto3. However, setting these CORS rules in Amazon S3, which I found here, resolved the issue for me: 

<?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>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

As mentioned in the linked github response, it’s probably best to update

<AllowedOrigin>*</AllowedOrigin>

to 

<AllowedOrigin>http://www.example.com</AllowedOrigin>

Here is the Amazon documentation for CORS settings.

👤SHq88

1👍

I’m using wagtail==2.10.1 and django==3.1.1 and using Digital Ocean Spaces (DO version of AWS s3). I ran into this same problem but solutions did not work (it has been two years since this was posted after all…). I realized this was beacuse since the solution was posted, django-storages and boto3 have updated. The format for their config settings have changed.

So if you are using boto3 dependency with django-storage on wagtail, you can replace this solution from @gasman:

AWS_HEADERS = {
    'Access-Control-Allow-Origin': '*'
}

with this updated code:

AWS_S3_OBJECT_PARAMETERS = {
        'ACL':'public-read',
}

I understand that there may be security issues with having public-read, but this is what got it working for me.

👤Glenn Paquette

0👍

I used wagtail==2.5.1 and django==2.2.1 static get from aws s3.
And the issue was in credentials to boto s3. When I updated credentials and make manage.py collectstatic all static loaded and site work well))

👤Pasha M

Leave a comment