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

花了整整一天的时间进行这项工作之后。我终于找到了带有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。

Answer 5

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

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

5 个答案: