从S3存储桶提供的Django静态文件的ERR_CERT_COMMON_NAME_INVALID和SSL_ERROR_BAD_CERT_DOMAIN错误

Question

我的Django静态文件有问题。我正在使用Django admin和Django Rest Framework。我正在尝试使用S3存储桶为admin和DRF提供静态文件。我可以成功访问存储桶中任何文件的URL，它将在我的浏览器中加载，并且该文件通过HTTPS提供。

我在CloudFormation中为S3存储桶创建了一个嵌套堆栈：

Description: >
  This template deploys S3 buckets for serving Django static files.

Parameters:
  AppUrl:
    Type: "String"
    Description: "The URL for our app (e.g. mydomain.com)"
    AllowedPattern: "[a-z0-9._-]+"

Resources:
  AssetsBucket:
    Type: "AWS::S3::Bucket"
    Properties:
      BucketName: !Sub ${AppUrl}-assets

  AssetsBucketPolicy:
    Type: "AWS::S3::BucketPolicy"
    Properties:
      Bucket: !Ref AssetsBucket
      PolicyDocument:
        Version: "2012-10-17"
        Statement:
        - Sid: PublicReadForGetBucketObjects
          Effect: "Allow"
          Principal: "*"
          Action: "s3:GetObject"
          Resource: !Sub "${AssetsBucket.Arn}/static/*"

当我的应用程序启动时，它将运行collectstatic，并将静态文件移入存储桶。这是我遇到的问题：

当我访问带有查询参数的DRF URL时?format=json。这将返回一个JSON响应，没有来自可浏览API的静态文件，并且我看不到任何错误。但是，当我访问可浏览的API或管理界面时，我似乎发现了三个错误消息之一。在Chrome中，我看到的是两种类型的行为。HTTPS已从URL中剥离（以红色划线），但是在静态资产加载时，控制台中显示了以下两个错误之一：

Access to font at 'https://mydomain.com-assets.s3.amazonaws.com/static/admin/fonts/Roboto-Bold-webfont.woff' from origin 'https://api.mydomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

要么

GET https://mydomain.com-assets.s3.amazonaws.com/static/rest_framework/css/bootstrap.min.css net::ERR_CERT_COMMON_NAME_INVALID

在Firefox中，不会加载静态文件，不会剥离HTTPS，并且在调试窗口的“网络”标签中看到以下错误：

An error occured: SSL_ERROR_BAD_CERT_DOMAIN

我尝试使用以下XML向存储桶添加CORS策略：

Description: >
  This template deploys S3 buckets for serving Django static files.

Parameters:
  AppUrl:
    Type: "String"
    Description: "The URL for our app (e.g. mydomain.com)"
    AllowedPattern: "[a-z0-9._-]+"

Resources:
  AssetsBucket:
    Type: "AWS::S3::Bucket"
    Properties:
      BucketName: !Sub ${AppUrl}-assets

  AssetsBucketPolicy:
    Type: "AWS::S3::BucketPolicy"
    Properties:
      Bucket: !Ref AssetsBucket
      PolicyDocument:
        Version: "2012-10-17"
        Statement:
        - Sid: PublicReadForGetBucketObjects
          Effect: "Allow"
          Principal: "*"
          Action: "s3:GetObject"
          Resource: !Sub "${AssetsBucket.Arn}/static/*"

但这不能解决HTTPS问题。我缺少什么可以帮助我摆脱掉划线的HTTPS的东西吗？

我相信证书可以，并且该问题与通过HTTPS连接请求HTTP无关。我认为这是一个CORS问题，所以我不确定为什么添加CORS桶策略无法解决此问题。

另外，我在Django应用程序中使用安装了django-cors-headers CORS_ORIGIN_ALLOW_ALL = True。

Answer 1

根据S3存储桶命名文档，存储桶名称中的点似乎是问题所在。

当您将虚拟托管样式的存储桶与安全套接字层（SSL）一起使用时，SSL通配符证书仅与不包含句点的存储桶匹配。要解决此问题，请使用HTTP或编写您自己的证书验证逻辑。我们建议您在使用虚拟托管样式存储区时，不要在存储区名称中使用句点（“。”）。

在存储区名称中添加域名的名称（用连字符替换点）以使其正常运行。

链接到文档：此处