HTML 中相对路径导致资源请求地址错误的解决方案

当 html 元素（如 `

在 react + Django 项目中，前端 html 由 django 渲染（例如访问 /index 返回 index.html），此时若 index.html 中包含如下代码：

浏览器会将该相对路径解析为相对于当前页面 URL 路径的地址。由于当前页面是 http://localhost/index，其路径为 /index，因此 asset/script.js 会被解析为：

http://localhost/index/asset/script.js

⚠️ 注意：这不是域名根目录下的 /asset/script.js，而是子路径下的嵌套路径——Django 自然无法匹配该路由，导致 404。

✅ 正确解决方案

方案一：使用根相对路径（推荐）

在 src 值前添加前导斜杠 /，使其成为从站点根目录开始的路径：

立即学习“前端免费学习笔记（深入）”；

这样无论当前页面是 /、/index 还是 /user/profile，浏览器始终请求：

http://localhost/asset/script.js

前提是 Django 已正确配置静态文件服务（如通过 Static_URL = ‘/asset/’ 并在开发环境启用 django.contrib.staticfiles）。

方案二：使用 标签统一基准路径

在 index.html 的

中显式声明基准 URL：

此后所有相对路径（包括 src、href）都将以此为基础解析。注意： 会影响整个文档中所有相对 URL，需谨慎使用，且一个文档中只能有一个 标签。

? 额外提示

• 不要混淆「绝对 URL」（含协议和域名，如 https://example.com/asset/script.js）与「根相对路径」（以 / 开头，如 /asset/script.js）；后者更灵活，支持本地开发与部署环境无缝切换。
• 在 Django 模板中，可结合 {% static %} 模板标签增强可维护性（需配置 STATIC_URL）：

  {% load static %} 

  它会自动输出类似 /static/script.js 的路径，本质仍是根相对路径。

✅ 总结

根本原因在于浏览器对相对路径的解析规则遵循 RFC 3986 —— 基于当前文档的 URL path component 拼接，而非服务器根目录。修复关键：强制指定根上下文。优先使用 /asset/script.js 形式，简洁、标准、零依赖；必要时辅以 统一管理，但避免滥用。