Django使用iFrame展示媒体目录上传HTML文件的问题排查

你遇到的404问题核心不是iframe标签本身的问题，是模板语法错误、路径配置偏差、开发环境静态服务规则三类问题叠加导致的，按以下步骤逐一排查修正即可：

先纠正之前的模板语法错误 #

你之前试的几种写法都有明确问题：

• {{ 'work.html.url' }}：给字段属性加了引号，Django模板会直接把它当成普通字符串渲染，不会读取模型实例的字段值
• {% url 'work.html' %}：{% url %}标签仅用于匹配urls.py中注册的命名路由，你没有给上传的html文件配置单独路由，用这个标签必然报错
• {{ work.html }}：直接渲染FileField实例，部分Django版本下输出的路径会缺少MEDIA_URL前缀，导致路径错误
• 你最后用的{{ work.html.url }}语法本身是正确的，404是配置问题导致的，和模板语法无关

第一步：修正路径配置，解决文件找不到的核心问题 #

1. 修正模型upload_to路径嵌套问题 #

你当前配置中upload_to="work_app/media/htmls/"配合MEDIA_ROOT = str(BASE_DIR) + "/media/"，文件实际上传后会存到项目根目录/media/work_app/media/htmls/路径下，多层media嵌套很容易出现URL和实际存储路径不匹配的问题，改成更简洁的配置避免路径混乱：

# Portfolio project overview model
class Work(models.Model):
    # 去掉upload_to里多余的media前缀，文件会直接存到MEDIA_ROOT/htmls/目录下
    html = models.FileField(upload_to="htmls/", null=True, blank=True)

2. 修正settings.py路径拼接写法 #

用字符串手动拼接路径很容易出现斜杠多写/漏写的问题，用Django默认的Path对象拼接更稳妥：

from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

# 媒体文件配置
MEDIA_ROOT = BASE_DIR / "media"
MEDIA_URL = '/media/'
# 静态文件配置
STATIC_ROOT = BASE_DIR / "static"
STATIC_URL = '/static/'

# iframe跨帧配置
X_FRAME_OPTIONS = 'SAMEORIGIN'

3. 修正urls.py语法与路由顺序问题 #

你贴的代码里第一行include多写了一个右括号，同时static辅助路由必须放在路由列表最后才能生效，修正后写法：

from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 删掉原来多出来的右括号
    path("", include("personal_portfolio_project.apps.resume_app.urls")),
    path("work/", include("personal_portfolio_project.apps.work_app.urls")),
]

if settings.DEBUG:
    # 这两行必须放在urlpatterns列表最后，不要插在自定义路由前面
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

第二步：按顺序验证问题点 #

1. 先确认DEBUG配置实际生效：本地开发时如果DEBUG=False，上面加的static媒体文件路由不会注册，所有上传的媒体文件都会返回404，可以在视图中打印settings.DEBUG确认值为True
2. 重新上传一个文件名是纯英文、无特殊字符的测试html文件，去项目根目录/media/htmls/文件夹下确认文件真实存在
3. 不要先测iframe，直接在浏览器地址栏输入http://127.0.0.1:8000/media/htmls/你的测试文件名.html，看能不能直接打开文件内容
   • 如果这一步就返回404，说明路径配置还是错的，重新核对MEDIA_ROOT路径、文件存储位置、路由配置
   • 如果这一步能正常打开文件，再测iframe加载

第三步：解决iframe加载不显示的问题 #

如果直接访问html文件URL正常，但iframe里加载失败，按以下点排查：

1. 模板里iframe不要写height="100%"，父元素没有明确高度的话iframe高度会塌陷成0，看起来像没加载，测试阶段先写固定高度：

{% extends "base.html" %}
{% block page_content %}
<h1>{{ work.title }}</h1>
<div class="row">
    <div class="col-md-8">
        {% if work.html %}
            <iframe height="600px" width="100%" src="{{ work.html.url }}" frameborder="0"></iframe>
        {% endif %}
    </div>
</div>
{% endblock %}

2. 打开浏览器开发者工具，切到Network面板找到html文件的请求，看响应头：
   • 如果X-Frame-Options值是DENY，说明配置没生效，检查有没有其他中间件覆盖了这个配置，开发环境临时可以把X_FRAME_OPTIONS改成ALLOWALL测试，确认能加载后再改回SAMEORIGIN
   • 如果有Content-Security-Policy响应头，看里面的frame-ancestors规则是不是限制了当前站点加载，调整CSP规则允许同域iframe加载即可

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