当 html 元素（如 `<script>`、`<img alt="HTML 中相对路径导致资源请求 URL 错误的解决方案" >`）使用相对路径（如 `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 进行路径拼接，而非网站根目录，从而导致请求发送到错误地址（如 `/index/asset/script.js`），正确做法是使用以 `/` 开头的绝对路径或配置 `<base>` 标签。</script>
在 React + Django 项目中，常见问题之一是前端静态资源加载失败：例如，index.html 中写有 <script src="asset/script.js"></script>，但浏览器实际发起的请求却是 http://localhost/index/asset/script.js，而非预期的 http://localhost/asset/script.js。这是因为 src 属性值 asset/script.js 是一个相对 URL，而浏览器解析相对 URL 的基准是当前文档的完整 URL（即页面所在路径），而非站点根目录。
以访问 http://localhost/index 为例：
- 当前页面 URL：http://localhost/index
- 浏览器将 asset/script.js 解析为相对于该路径的子路径 → 拼接后为 http://localhost/index/asset/script.js
- 若用户访问的是 http://localhost/admin/user，同一条 src="asset/script.js" 将被解析为 http://localhost/admin/user/asset/script.js
✅ 正确做法一：使用根相对路径（Root-relative URL）
在路径前添加开头斜杠 /，明确指定从网站根目录开始解析：
<script src="/asset/script.js"></script> <!-- 解析为：http://localhost/asset/script.js（无论当前页面路径如何） -->
✅ 正确做法二：使用 <base> 标签统一基准 URL
在 <head> 中声明基准 URL，所有后续相对路径均以此为准：
<head> <base href="http://localhost/"> <!-- 或更推荐的相对 base（兼容部署路径变化）： --> <!-- <base href="/"> --> </head> <body> <script src="asset/script.js"></script> <!-- 现在等价于 /asset/script.js --> </body>
⚠️ 注意事项：
- <base> 会影响页面中所有相对 URL（包括 <a href>、<img src>、表单 action 等），需谨慎使用，避免意外覆盖；
- 在 Django 模板中，建议结合 {% static %} 模板标签 + 配置 STATIC_URL = '/static/'，再使用 /static/js/app.js 形式，确保生产环境可迁移；
- React 应用若通过 create-react-app 构建并托管在子路径（如 /app/），需在 package.json 中设置 "homepage": "/app"，构建后所有资源路径自动适配；
- 不要混淆「绝对 URL」（含协议域名，如 https://example.com/asset.js）与「根相对 URL」（以 / 开头，如 /asset.js）——后者更灵活、无跨域风险，且适配不同部署环境。
总结：始终优先使用以 / 开头的根相对路径（如 /asset/script.js）替代无前缀的相对路径（如 asset/script.js），这是解决此类资源加载错位最直接、可靠且符合 Web 标准的做法。
立即学习“前端免费学习笔记（深入）”；
