被 CORS 策略阻止 - 来自 Django 应用程序的 S3 存储桶访问答案

【问题标题】：Blocked by CORS Policy - S3 Bucket Access from Django App被 CORS 策略阻止 - 来自 Django 应用程序的 S3 存储桶访问
【发布时间】：2017-12-20 14:08:12
【问题描述】：

我的应用程序访问 S3 存储桶中的字体文件时遇到问题。

这是我关于 S3 存储桶的 CORS 政策：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

但在控制台中访问我的网站时，我得到以下信息：

已被 CORS 策略阻止：无“访问控制允许来源” 请求的资源上存在标头

【问题讨论】：

您已清除浏览器缓存？您能否从浏览器捕获带有标头的失败请求/响应并将其编辑到问题中？
同样的问题你是怎么解决的？
有人找到答案了吗？
我在下面添加了一个答案。

标签： django nginx amazon-s3 cors amazon-cloudfront

【解决方案1】：

我最终配置了一个 CloudFront 分配，将 Access-Control-Allow-Origin 列入白名单，源为 S3，并将 nginx 配置为包含正确的标头。

Origin 请求标头指示提取的来源。它不包含任何路径信息，但只有服务器名称（例如https://www.example.com）。详情请见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin。

在这里，我们设置了 Access-Control-Allow-Origin 响应标头中包含的值。如果源是我们已知的主机之一——通过 HTTP 或 HTTPS 提供服务——我们允许 CORS。否则，我们设置“null”值，禁止 CORS。

map $http_host $cors_origin {
default "null";
  "~*^\.example\.com$" "$http_x_forwarded_proto://$http_host";
}

【讨论】：