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

ERR_CERT_COMMON_NAME_INVALID and SSL_ERROR_BAD_CERT_DOMAIN errors with Django static files served from S3 bucket

我遇到 Django 静态文件问题。我正在使用 Django admin 和 Django Rest Framework。我正在尝试使用 S3 存储桶为管理员和 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 并将静态文件移动到存储桶中。这是我遇到的问题:

当我使用查询参数 ?format=json 访问 DRF URL 时。这个 returns 一个 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 不会被剥离,我在调试 window 的网络选项卡中看到以下错误:

An error occured: SSL_ERROR_BAD_CERT_DOMAIN

我尝试使用以下 XML:

将 CORS 策略添加到存储桶
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

但这并没有解决 HTTPS 问题。有没有我遗漏的东西可以帮助我摆脱划掉的 HTTPS?

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

此外,我在我的 Django 应用程序中安装了 django-cors-headers CORS_ORIGIN_ALLOW_ALL = True

根据 S3 存储桶命名文档,问题似乎与存储桶名称中的点有关。

When you use virtual hosted–style buckets with Secure Sockets Layer (SSL), the SSL wildcard certificate only matches buckets that don't contain periods. To work around this, use HTTP or write your own certificate verification logic. We recommend that you do not use periods (".") in bucket names when using virtual hosted–style buckets.

对存储桶名称中的域名进行 Slugify(将点替换为连字符)以使其工作。

Link 到文档:here