AWS S3 存储桶上静态文件的 Django 问题

Question

我的 Django 网站有一个非常奇怪的情况。我将所有静态文件和媒体文件放在 Amazon S3 存储桶中。媒体文件夹用于个人资料、博客图片和静态文件夹，所有 css、js、img、scss 等。一切正常，除了网站在我使用 Safari 时正确加载，在 Chrome 中它不加载我的标签具有图像和 firefox id 的引导类，也不会加载标签和 js。 js 正在渲染我的图表。可能是什么问题呢。我将提供 AWS S3 的 cod 配置以及来自 Safari、Chrome 和 Firefox 的屏幕截图。

settings.py

AWS_ACCESS_KEY_ID = aws_access_key_id
AWS_SECRET_ACCESS_KEY = aws_secret_access_key
AWS_STORAGE_BUCKET_NAME = aws_storage_bucket_name
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}
AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = 'public-read'

AWS_LOCATION = 'static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
DEFAULT_FILE_STORAGE = 'ecomon.storages.MediaStore'

storages.py 用于 DEFAULT_FILE_STORAGE（媒体文件夹）：

from storages.backends.s3boto3 import S3Boto3Storage


class MediaStore(S3Boto3Storage):
    location = 'media'
    file_overwrite = False

它在 Safari 上的表现：

它在 Chrome 上的表现：

它在 Firefox 上的表现：

如果需要，媒体文件夹工作正常，照片加载成功，如果我上传一张新照片，它会出现在应有的位置。

以及包含图像的标签示例：

<div class="col-auto">
   <i class="fas fa-wallet fa-2x text-gray-300"></i>
</div>

Answer 1

每个浏览器的控制台输出是什么？

清除所有浏览器上的浏览数据，重启实例，看看会发生什么。当这样的事情发生时，最好为正在发生的事情建立一个基线。它将在所有浏览器上加载，而不是在所有浏览器上加载，或者如果它保持不变，您肯定会知道开始研究 Firefox 和您的应用程序。无论哪种方式，您都会知道接下来要寻找什么。