尽管将 AWS 静态文件路径添加到 CORS_ORIGIN_WHITELIST django-cors-headers，但出现 403 错误

Question

我在我的文本字段中使用 django-summernote。这应该使我的文本字段看起来有点像下面的图片

现在上面的静态文件存储在我的 AWS S3 存储桶中。我在浏览器控制台中收到403 error，下面是我的文本字段现在的样子

控制台中的 403 错误如下所示

跨域请求被阻止：同源策略不允许读取位于https://some_bucket_66d.s3.amazonaws.com/static/summernote/font/summernote.woff?1d9aeaaff0a8939558a45be6cd52cd4c 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。[了解更多] 可下载字体：下载失败（字体系列：“summernote”样式：正常重量：400 拉伸：100 src 索引：1）：URI 错误或不允许跨站点访问来源：https://some_bucket_6d.s3.amazonaws.com/static/summernote/font/summernote.woff?1d9aeaaff0a8939558a45be6cd52cd4c

所以为了解决这个错误我做了 pip install django-cors-headers

添加

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

将其添加到我的中间件

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

并在我的 django 设置中将以下 3 个链接添加到我的白名单中。我不知道http://127.0.0.1:9000 是做什么用的，但我还是让它在那里，就像在https://pypi.org/project/django-cors-headers/ 页面中一样

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"
]

即使在 Django Cors 中将其列入白名单后，我仍然遇到同样的错误我做错了什么以及如何解决它

尝试了@jusrDare 建议的解决方案。现在错误消息已更改为以下

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

另外，如果您不想将 AllowedOrigin 设置为 *，您可以尝试以下代码

<?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>

他们俩都给我同样的错误

Answer 1

同样的错误，如果我今天能解决，我会回来......

返回！

在 AWS 中调整 CORS 标头似乎可以解决问题。

将存储桶权限中的默认 CORS CONFIGURATION 替换为：

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

我在默认设置中添加的只是 Conten-* Allowed 标头标签。

不知道为什么这完全有效，希望其他人可以加入。

Answer 2

你知道，真正奇怪的是我在尝试加载 .woff 和 .tff 文件（图标文件）时遇到了完全相同的问题（错误 403：禁止），并且通过单独公开所有文件来解决在我的 AWS S3 存储桶上（不是一次整个文件夹。将它们单独公开。它对我有用）。

Answer 3

AWS 中的 CORS 配置：

在 S3 控制台中，CORS 配置必须是 JSON。

您可以在AWS docs 上查看 JSON 格式的一些示例：

[
    {
        "AllowedHeaders": [
            "Content-*",
            "Authorization"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Answer 4

我用this 解决了我的问题。我的问题出在 CloudFront 上。启用白名单和方法选项修复。

Answer 5

花了一整天的时间尝试完成这项工作。终于找到了一个有summernote字体的CDN，之后就不用担心CORS了

在我的 django 模板中刚刚添加了下面的代码

    <style>
      @font-face {
            font-family: "summernote";
            font-style: normal;
            font-weight: normal;
            src: url("https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/font/summernote.eot");
            src: url("https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/font/summernote.eot") format("embedded-opentype"),
            url("https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/font/summernote.woff") format("woff"),
            url("https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/font/summernote.ttf") format("truetype");
        }
    </style>

您可以从此链接https://cdnjs.com/libraries/summernote获取CDN