HTML 中相对路径的 src 属性导致请求地址错误的解决方案

当 html 元素（如 `

在你的 React + Django 项目中，访问 http://localhost/index 时，浏览器将当前页面路径解析为 /index（注意：无尾部斜杠），此时

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 中将：

改为：

立即学习“前端免费学习笔记（深入）”；

开头的 / 表示“相对于网站根目录”，无论用户访问的是 /、/index、/user/profile 还是 /admin/，该资源始终从 http://localhost/asset/script.js 加载。

? 另一种灵活方案：使用 标签统一指定基准 URL
在

这会将整个文档的 base URL 设为网站根路径，此后所有相对路径（包

⚠️ 注意事项：

• 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），它语义清晰、行为确定、无需额外配置，是解决此类资源加载错位问题最直接、最可靠的方式。

# 浏览器  # app  # public  # js  # go  # 路由  # html  # 前端  # 开发环境  # react  # django 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】