错误。base标签不影响fetch()和xmlhttprequest的请求地址,它们按当前页面url解析,不受html解析阶段的base设置影响。

base 标签会改变所有相对 URL 的解析基准,包括 fetch() 和 XMLHttpRequest 的请求地址
只要页面中存在 <base href="https://example.com/api/">,所有未以 http://、https://、//、/ 开头的请求路径,都会被浏览器自动拼接到 base.href 后面。这不是 JavaScript 行为,是浏览器原生 URL 解析逻辑。
比如:
fetch("users")
在 <base href="https://api.example.com/v1/"> 下实际发出的请求是:
https://api.example.com/v1/users
而不是你代码所在页面的同目录地址。
常见错误现象:Ajax 请求 404 或发到错误域名
典型表现有:
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- 本地开发时请求正常(没配
<base>),上线后突然 404 - 请求发到了 CDN 域名或管理后台域名,而非 API 服务域名
-
fetch("./data.json")变成https://cdn.example.com/./data.json(注意开头的.也被保留)
根本原因:开发者误以为只有 <a></a>、<img> 等标签受 <base> 影响,忽略了 Fetch/XHR 的 URL 解析也走同一套机制。
绕过 base 标签影响的三种可靠方式
不建议移除 <base>(尤其单页应用路由依赖它),而是显式控制请求路径:
- 用绝对 URL:
fetch("https://api.example.com/users")—— 最直接,但硬编码域名不利于环境切换 - 用协议相对路径:
fetch("//api.example.com/users")—— 复用当前页面协议,适合多环境共用 - 用根对路径(以
/开头):fetch("/api/users")—— 不受<base>影响,始终相对于站点根目录
注意:./ 和 ../ 仍会被 base 修正,不要依赖它们“逃逸”。
Vue/React 项目中容易忽略的配置点
构建工具(如 Vite、Webpack)的 publicPath 或 base 配置,和 HTML 中的 <base> 是两回事,但效果可能叠加:
- Vite 的
base: "/admin/"会让打包后的资源路径带前缀,但它**不修改**运行时 fetch 行为 - 而 HTML 中手动写的
<base href="/admin/">会真实影响 fetch - 两者同时存在且不一致时,静态资源加载和 API 请求会分别走不同 base,造成混乱
建议统一策略:要么全靠构建配置 + 根对路径请求,要么保留 <base> 并在所有 Ajax 调用中显式使用根对路径或绝对路径。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










