HTML 中相对路径导致资源请求 URL 错误的解决方案_网络技术

发布时间 - 2026-01-28 00:00:00 点击率：次

当 html 元素（如 `

在 React + Django 项目中，常见问题之一是前端静态资源加载失败：例如，index.html 中写有，但浏览器实际发起的请求却是 http://localhost/index/asset/script.js，而非预期的 http://localhost/asset/scrip

t.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
在

中声明基准 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 标准的做法。