当 html 元素（如 `
在 React + Django 项目中，常见问题之一是前端静态资源加载失败：例如，index.html 中写有 ，但浏览器实际发起的请求却是 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）
在路径前添加开头斜杠 /，明确指定从网站根目录开始解析：
✅ 正确做法二：使用
在
⚠️ 注意事项：
-
会影响页面中所有相对 URL（包括 、 、表单 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 标准的做法。
立即学习“前端免费学习笔记（深入）”；
