AWS S3部署Django应用时含模板变量的静态文件返回403错误

AI 小北

2026-9-24

问题判定

该问题不是CORS导致的，你当前的CORS配置无异常。

根因分析

你使用{% static %}模板标签的方式错误：对接AWS S3时，django-storages会自动给{% static %}标签包裹的路径追加S3签名查询参数（即你看到的?X-Amz-Algorithm=xxx类凭证串）。
你现有写法将变量和.png后缀放在了{% static %}标签外，导致签名参数被插入到文件名前缀和变量之间，最终生成的路径格式完全错误，因此请求返回403。
本地环境正常是因为本地使用Django自带的静态文件服务，{% static %}标签不会追加签名参数，拼接出来的路径符合预期。

修复方案

你可以任选以下两种方式修正：

方式1：视图内提前拼接完整路径（更稳妥）

修改views.py的上下文生成逻辑，提前拼好完整的图片路径再传给模板：

siblings_left = Artwork.objects.filter(parent=artwork.parent).exclude(no_ancestors=0).filter(id__lt = id)      
no_siblings_left = len(siblings_left)
# 拼接完整图片路径
left_frame_img = f'img/siblingsLeftFrame{no_siblings_left}.png'
context = {    
    ...        
    'left_frame_img' : left_frame_img,    
    ...     
}

模板中直接传入完整路径给static标签：

<div class="sibling" id="left">
    <a href="{% url 'showtree' sibling_left_id %}">
        <img src="{% static left_frame_img %}">
    </a>
</div>

方式2：模板内使用add过滤器拼接路径

无需修改视图，直接调整模板写法，用模板内置的add过滤器拼接完整路径后再传入static标签：

<div class="sibling" id="left">
    <a href="{% url 'showtree' sibling_left_id %}">
        <img src="{% static '/img/siblingsLeftFrame'|add:no_siblings_left|add:'.png' %}">
    </a>
</div>