html 元素（如 `<script>`、`<img alt="HTML 中相对路径的 src 属性导致请求地址错误：如何正确设置资源路径" >`）使用相对路径的 `src` 属性时，浏览器会基于当前页面 url 进行路径拼接，而非网站根目录，从而引发 404 错误；解决方法是改用绝对路径（以 `/` 开头）或配置 `<base>` 标签。</script>
在 React + Django 项目中，你通过浏览器访问 http://localhost/index，Django 返回 index.html。此时若 HTML 中包含：
<script src="asset/script.js"></script>
浏览器会将该路径视为相对于当前页面 URL 的相对路径，即：
- 当前页面 URL：http://localhost/index
- 浏览器解析 src="asset/script.js" → 拼接为：http://localhost/index/asset/script.js
- 结果：404（因为静态资源实际位于 http://localhost/asset/script.js）
⚠️ 注意：这不是 React 或 Django 的 bug，而是浏览器遵循 URL 规范（RFC 3986） 的标准行为——相对 URL 解析始终以当前文档的完整 URL为基准。
✅ 正确做法：使用根相对路径（Root-relative URL）
在 src、href 等属性中，以 / 开头的路径表示从网站根目录开始解析：
立即学习“前端免费学习笔记（深入）”；
<script src="/asset/script.js"></script> <!-- 解析为：http://localhost/asset/script.js --> <link rel="stylesheet" href="/css/main.css"> <img src="/images/logo.png" alt="Logo">
✅ 优势：无论用户访问的是 /、/index、/user/profile 还是 /admin/，资源始终从根路径加载，行为一致、可预测。
? 替代方案：使用
你也可以在
中声明<head>
<base href="http://localhost/">
<!-- 或动态生成（如 Django 模板中）： -->
<!-- <base href="{{ request.scheme }}://{{ request.get_host }}/"> -->
</head>
<body>
<script src="asset/script.js"></script> <!-- 现在等价于 http://localhost/asset/script.js -->
</body>⚠️ 注意事项：
-
会影响页面中所有相对 href 和 src（包括 、 、<script>、<link> 等），需全局评估影响；</script>
- 若页面含跳转链接（如 ），也受
影响，可能意外改变导航逻辑； - 不推荐在单页应用（SPA）中滥用
，尤其当路由由前端（如 React Router）接管时，易与 basename 配置冲突。
? Django 部署提示（补充实践建议）
确保 Django 正确服务静态资源：
- 开发环境：确认 settings.py 中已启用 STATIC_URL = '/asset/'，且 STATICFILES_DIRS 包含 asset/ 目录；
- 模板中避免硬编码路径，推荐使用 Django 模板标签（如 {% static 'script.js' %}），但注意：该标签仅在 Django 渲染模板时生效；若 index.html 是由 React 构建后直接由 Django serve 静态文件返回（未经 Django 模板引擎处理），则必须手动写 /asset/script.js。
✅ 总结
| 写法 | 示例 | 解析基准 | 推荐度 |
|---|---|---|---|
| 相对路径 | asset/script.js | 当前页面 URL（易出错） | ❌ 不推荐 |
| 根相对路径 | /asset/script.js | 网站根域名（http://localhost/） | ✅ 强烈推荐 |
|
|
|
|
⚠️ 谨慎使用，需全局验证 |
修正后，资源将稳定加载，彻底避免因路径拼接异常导致的 404 问题。
