被CORS政策阻止-Django应用中的S3存储桶访问

Question

我的应用程序访问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政策封锁：所要求的资源上没有'Access-Control-Allow-Origin'标头

Answer 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";
}