当 html 元素（如 `<script>`、`<img alt="HTML 中相对路径导致资源请求地址错误的解决方案" >`）使用相对路径（如 `asset/script.js`）作为 `src` 属性时，浏览器会基于当前页面 url 的**路径部分**进行拼接，而非网站根目录，从而导致请求发送到错误地址（如 `localhost/index/asset/script.js`），正确做法是使用以 `/` 开头的绝对路径或配置 `<base>` 标签。</script>
在 React + Django 项目中，前端 HTML 由 Django 渲染（例如访问 /index 返回 index.html），此时若 index.html 中包含如下代码：
<script src="asset/script.js"></script>
浏览器会将该相对路径解析为相对于当前页面 URL 路径的地址。由于当前页面是 http://localhost/index，其路径为 /index，因此 asset/script.js 会被解析为：
http://localhost/index/asset/script.js
⚠️ 注意：这不是域名根目录下的 /asset/script.js，而是子路径下的嵌套路径——Django 自然无法匹配该路由，导致 404。
✅ 正确解决方案
方案一：使用根相对路径（推荐）
在 src 值前添加前导斜杠 /，使其成为从站点根目录开始的路径：
立即学习“前端免费学习笔记（深入）”；
<script src="/asset/script.js"></script>
这样无论当前页面是 /、/index 还是 /user/profile，浏览器始终请求：
http://localhost/asset/script.js
前提是 Django 已正确配置静态文件服务（如通过 STATIC_URL = '/asset/' 并在开发环境启用 django.contrib.staticfiles）。
方案二：使用 <base> 标签统一基准路径
在 index.html 的 <head> 中显式声明基准 URL：
<base href="http://localhost/"> <!-- 或更通用的写法（自动适配协议与主机） --> <base href="/">
此后所有相对路径（包括 src、href）都将以此为基础解析。注意：<base> 会影响整个文档中所有相对 URL，需谨慎使用，且一个文档中只能有一个 <base> 标签。
? 额外提示
- 不要混淆「绝对 URL」（含协议和域名，如 https://example.com/asset/script.js）与「根相对路径」（以 / 开头，如 /asset/script.js）；后者更灵活，支持本地开发与部署环境无缝切换。
- 在 Django 模板中，可结合 {% static %} 模板标签增强可维护性（需配置 STATIC_URL）：
{% load static %} <script src="{% static 'script.js' %}"></script>它会自动输出类似 /static/script.js 的路径，本质仍是根相对路径。
✅ 总结
根本原因在于浏览器对相对路径的解析规则遵循 RFC 3986 —— 基于当前文档的 URL path component 拼接，而非服务器根目录。修复关键：强制指定根上下文。优先使用 /asset/script.js 形式，简洁、标准、零依赖；必要时辅以 <base> 统一管理，但避免滥用。
