代码之家  ›  专栏  ›  技术社区  ›  Samir Tendulkar

获取403错误在cors-origin-django-cors头中添加aws静态文件路径

  •  0
  • Samir Tendulkar  · 技术社区  · 6 年前

    我正在将Django SummerNote用于我的文本字段。这会使我的文本字段看起来有点像下面的图像

    enter image description here

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

    enter image description here

    控制台中的403错误如下 enter image description here

    跨源请求被阻止:同一源策略不允许读取位于的远程资源 https://some_bucket_66d.s3.amazonaws.com/static/summernote/font/summernote.woff?1d9aeaaff0a8939558a45be6cd52cd4c . (原因:CORS头访问控制允许源丢失)。[了解更多信息] 可下载字体:下载失败(字体系列:“SummerNote”样式:Normal Weight:400 Stretch:100 SRC Index: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个指向我的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建议的解决方案。现在错误消息已更改为以下内容

    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

    如果你不想做通婚起源 * 您可以尝试以下代码

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

    不管怎样,他们都给了我同样的错误

    0 回复  |  直到 6 年前
        1
  •  1
  •   justDare    6 年前

    同样的错误,如果我今天能解决的话会回来的…

    回来!

    在AWS中调整CORS头似乎可以做到这一点。

    将Bucket权限中的默认CORS配置替换为:

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

    我从默认设置中添加的所有内容都是conten-*允许的header标记。

    不知道为什么这是正确的,希望其他人可以插话。

        2
  •  0
  •   Samir Tendulkar    6 年前

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

    您可以通过此链接获取cdn https://cdnjs.com/libraries/summernote