当 html 元素（如 `<script>`、`<img alt="HTML 中相对路径的 src 属性导致请求地址错误的解决方案" >`）使用相对路径（如 `asset/script.<a style="max-width:90%" title= "js" href="https://www.php.cn/zt/15802.html" target="_blank">js`）作为 `src` 值时，<a style="color:#f60; text-decoration:underline;" title= "浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器会基于当前页面 url 的**路径部分**进行拼接，而非网站根目录，从而引发 404 或资源加载失败。</script>
在你的 React + Django 项目中，访问 http://localhost/index 时，浏览器将当前页面路径解析为 /index（注意：无尾部斜杠），此时 <script src="asset/script.js"> 会被解析为：
http://localhost/index/asset/script.js
而非你期望的根路径下的：
http://localhost/asset/script.js
这是因为浏览器遵循 URL 解析规范：相对 URL 的解析依赖于当前文档的 base URL。而默认 base URL 就是当前页面完整 URL（即 http://localhost/index），其路径为 /index，因此相对路径 asset/script.js 被解析为 /index/asset/script.js。
✅ 正确做法是使用绝对路径（从根开始）：
在 index.html 中将：
<script src="asset/script.js"></script>
改为：
立即学习“前端免费学习笔记（深入）”；
<script src="/asset/script.js"></script>
开头的 / 表示“相对于网站根目录”，无论用户访问的是 /、/index、/user/profile 还是 /admin/，该资源始终从 http://localhost/asset/script.js 加载。
? 另一种灵活方案：使用 <base> 标签统一指定基准 URL
在 <head> 中添加：
<base href="/">
这会将整个文档的 base URL 设为网站根路径，此后所有相对路径（包括 src、href）均以此为基准。但需注意：<base> 会影响所有相对链接（如 <a href="about"> 也会跳转到 /about），且一旦设置便不可撤销，不推荐在单页应用（SPA）中滥用，尤其当路由由前端（如 React Router）接管时，可能干扰导航逻辑。
⚠️ 注意事项：
- Django 静态文件服务需确保 /asset/ 路径可被正确路由或通过 STATIC_URL = '/asset/' 配置，并在开发环境启用 django.contrib.staticfiles；
- 若部署到子路径（如 https://example.com/myapp/），应将 base URL 设为 /myapp/，并统一使用 /myapp/asset/script.js 或动态注入 {{ STATIC_URL }}（Django 模板变量）；
- React 应用若通过 create-react-app 构建，建议在 public/index.html 中使用 %PUBLIC_URL%/asset/script.js（构建时自动替换），兼顾开发与生产环境。
总结：始终优先使用以 / 开头的根相对路径（root-relative path），它语义清晰、行为确定、无需额外配置，是解决此类资源加载错位问题最直接、最可靠的方式。
