Django 4.2+DigitalOcean Spaces静态文件(CSS/JS)无法加载求助

我使用Django 4.2搭建项目，已配置Django Storage与DigitalOcean Spaces，部署在DigitalOcean Droplets上。执行collectstatic后所有文件已上传至Spaces，图片可正常显示，但CSS和JavaScript无法加载，已排查两周未解决。

当前配置信息 #

AWS_ACCESS_KEY_ID = env('aws_s3_access_key')
AWS_SECRET_ACCESS_KEY = env('aws_s3_secret_key')

AWS_S3_REGION_NAME = env('aws_s3_region_name')
AWS_STORAGE_BUCKET_NAME = env('aws_storage_bucket_name')
AWS_S3_ENDPOINT_URL = "https://mogdynamics.nyc3.digitaloceanspaces.com"

AWS_STATIC_LOCATION = 'static'
AWS_DEFAULT_ACL = "public-read"
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=86400'}


# DIGITIALOCEAN SPACES CONFIGURATION
STORAGES = {
    "default": {
        "BACKEND": "storages.backends.s3.S3Storage",
        "OPTIONS": {
            "bucket_name": AWS_STORAGE_BUCKET_NAME,
            "region_name": AWS_S3_REGION_NAME,
            "default_acl":  AWS_DEFAULT_ACL
        },
    },
    "staticfiles": {
        "BACKEND": "storages.backends.s3.S3Storage",
        "OPTIONS": {
            "bucket_name": AWS_STORAGE_BUCKET_NAME,
            "region_name": AWS_S3_REGION_NAME,
            "default_acl":  AWS_DEFAULT_ACL
        },
    },
}


STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
STATIC_URL = f'https://{AWS_S3_ENDPOINT_URL}/{AWS_STATIC_LOCATION}/'

错误信息 #

点击页面源码中的CSS链接时，返回以下错误：

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>SignatureDoesNotMatch</Code>
<Message/>
<RequestId>tx000003614bd933f0201e8-00657ea2de-4e1a3-nyc3d</RequestId>
<HostId>4e1a3-nyc3d-nyc3-zg04</HostId>
</Error>

解决方案 #

1. 修复STATIC_URL的拼接错误 #

你的AWS_S3_ENDPOINT_URL已经包含https://前缀，当前STATIC_URL拼接后会生成重复的协议前缀，导致路径错误。修改为：

STATIC_URL = f'{AWS_S3_ENDPOINT_URL}/{AWS_STATIC_LOCATION}/'

或者使用更规范的域名拼接方式：

STATIC_URL = f'https://{AWS_STORAGE_BUCKET_NAME}.{AWS_S3_REGION_NAME}.digitaloceanspaces.com/{AWS_STATIC_LOCATION}/'

2. 为staticfiles存储指定location #

在STORAGES的staticfiles配置中添加location参数，确保静态文件上传到指定的前缀目录，避免路径混乱：

"staticfiles": {
    "BACKEND": "storages.backends.s3.S3Storage",
    "OPTIONS": {
        "bucket_name": AWS_STORAGE_BUCKET_NAME,
        "region_name": AWS_S3_REGION_NAME,
        "default_acl": AWS_DEFAULT_ACL,
        "location": AWS_STATIC_LOCATION  # 新增该行
    },
},

3. 检查DigitalOcean Spaces的CORS配置 #

即使图片能显示，CSS/JS可能因CORS规则被浏览器拦截。进入Spaces控制台，找到对应bucket的Settings -> CORS Configuration，添加以下规则：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["*"],  // 建议替换为你的项目域名，如https://your-domain.com
        "ExposeHeaders": []
    }
]

4. 确认静态文件的ACL权限 #

确保上传的CSS/JS文件权限为public-read。可手动在Spaces控制台查看文件权限，或重新执行collectstatic并清除旧文件：

python manage.py collectstatic --clear

5. 清除浏览器缓存 #

浏览器可能缓存了错误的静态文件链接，使用Ctrl+Shift+R强制刷新页面，或用无痕模式测试。

内容的提问来源于stack exchange，提问作者Abayomi Olowu