尽管添加AWS静态文件路径到CORS_ORIGIN_WHITELISTdjango-cors-Headers，但仍有403个错误

Question

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

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

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

所以为了解决这个错误，我安装了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个链接添加到我的whitlist。我不知道是什么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建议的解决方案。现在，错误消息已更改为以下内容

可下载字体：下载失败（字体家族：Summernote样式：正常权重：400拉伸：100 src指数：1）：状态=2147746065来源：https://some_bucket_66d.s3.amazonaws.com/static/summernote/font/summernote.woff?1d9aeaaff0a8939558a45be6cd52cd4c

另外，如果您不想使用AllowedOrigin as*的方式，可以尝试以下代码

<?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配置：

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

您可以查看AWS文档中的一些JSON格式示例：

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

Answer 2

你知道，真正奇怪的是，我在尝试加载时遇到了完全相同的问题（错误403：禁止）。沃夫和。tff文件（图标文件），通过单独公开AWS S3 bucket上的所有文件（而不是一次公开整个文件夹。单独公开它们。这对我很有效）。

Answer 3

同样的错误，如果我今天能弄清楚，会回来的...

后退！

在AWS中调整CORS标题似乎可以达到目的。

将bucket权限中的默认CORS配置替换为：

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

我从默认设置中添加的只是Conten-*允许的标题标记。

我不确定这到底是为什么，希望其他人能插话。