Question

基本上我使用S3作为网站的静态文件。大多数图像都在模板中引用，但我注意到每个引用的图像或文件（特别是字体）都不起作用。

我已经在S3中公开了所有文件，并且可以使用公共链接访问它们。

这是我的setting.py

 val pt     = Paint(Paint.ANTI_ALIAS_FLAG)
 pt.color   = Color.WHITE
 pt.style   = Paint.Style.FILL
 pt.setXfermode(PorterDuffXfermode(PorterDuff.Mode.DST))
 canvas.drawCircle(30,30,10,pt)

我删除了此帖子的AWS访问权限和密钥。

fonts.css包含以下内容;

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

AWS_ACCESS_KEY_ID = ''
AWS_SECRET_ACCESS_KEY = ''
AWS_STORAGE_BUCKET_NAME = 'abc-bucket'
AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME

AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}

AWS_LOCATION = 'static'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)

DEFAULT_FILE_STORAGE = 'app.storage_backends.MediaStorage'

并且AWS文件夹结构是;

@font-face {
    font-family: 'rt-icons-2';
    src:url('../../fonts/rt-icons-23dab.eot?wz19bt');
    src:url('../../fonts/rt-icons-2d41d.eot?#iefixwz19bt') format('embedded-opentype'),
        url('../../fonts/rt-icons-23dab.ttf?wz19bt') format('truetype'),
        url('../../fonts/rt-icons-23dab.woff?wz19bt') format('woff'),
        url('../../fonts/rt-icons-23dab.svg?wz19bt#rt-icons-2') format('svg');
    font-weight: normal;
    font-style: normal;
}

我知道CSS正在运行，因为所有样式都很好所以fonts.css正在被访问，但相对路径被破坏，所有字体图标都丢失了。在我运行collectstatic并将它们移动到S3之前，这些工作正常。

Answer 1

找到答案here。 CORS配置就是问题所在。

Answer 2

按以下方式配置您的AWS S3存储桶CORS：

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

（根据需要进行修改）

基于： https://forums.aws.amazon.com/thread.jspa?messageID=406237 https://kahwee.github.io/2016/06/12/how-to-make-vary-origin-in-aws-s3.html

Django CSS相对路径无法在Amazon S3中运行

2 个答案: