Wagtail 使用 S3 作为存储后端时,管理界面的 icon 图标不能正常显示。

这是因为 wagtail 使用了网络图标字体,而对象存储不允许从远端读取字体导致的。

解决方法一

在项目配置文件中找到 S3 存储的配置信息,添加以下配置后再重新执行 ./manage.py collectstatic

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

这个方法是为每个上传到 S3 的对象设置一个专门的头记录,允许这个文件实现跨域访问。

解决方法二

这种方法是在平台上直接设置 CORS,不需要重新上传文件,立即生效,推荐。

对应的纯文本配置:

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

Reference