尝试访问管理字体文件时，Django 在 AWS S3 中托管静态文件导致 CORS 错误

Posted 2023-02-24

【中文标题】尝试访问管理字体文件时，Django 在 AWS S3 中托管静态文件导致 CORS 错误

【英文标题】：Django hosting static files in AWS S3 causing CORS error when trying to access admin font files

【发布时间】：2021-08-31 21:54:24

【问题描述】：

我设置 Django 以将所有静态文件存储在 S3 上，并使用“collectstatic”命令复制所有管理文件，当我访问管理站点时，CSS 和 JS 文件正确来自 S3 存储桶。例如：

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

但是当它尝试访问字体文件 .woff 时，我收到以下错误：

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.

奇怪的是，它让我可以访问除字体文件之外的所有文件：

【问题讨论】：

是否配置了CORS的权限？

【参考方案1】：

在 S3 存储桶权限中配置以下内容 > CORS 修复了该问题。

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

【参考方案2】：

我记得我之前在使用 Google Cloud Storage 时遇到过这个问题。

您必须让您的存储桶允许跨域到您的域。

【讨论】：

我可以试试这个，但它不会阻止所有文件的下载，而不仅仅是字体文件？

我不确定为什么会发生这种情况，但很明显，您的静态 url 出于某种原因阻止了对字体的访问。将您的域列入白名单，应该可以正常工作。