前端 base 元素与文档请求相对路径之间的关系

在浏览器中，不论是请求静态资源（如 css、js、jpeg、png），还是发起 Ajax 请求，只要目标地址是一个相对路径，那么就会进行路径拼接。

最终地址 = 基础地址 + 相对路径

基础地址的值就是脚本全局环境的 window.document.baseURI。

按照平常经验，我们在两种情况下请求一个相同的相对路径 /request.php

• 当前浏览器地址为 http://host:port/a 时 ，实际请求地址为 http://host:port/request.php
• 当前浏览器地址为 http://host:port/a/b 时，实际请求地址为 http://host:port/a/request.php

要注意的时，这是文档中没有 base 元素时的情况。
当文档中存在如下 base 元素时，

<base href="http://host:port/c/d">

无论浏览器地址是上面两种情况的任何一种，最终请求地址都是 http://host:port/c/request.php

也就是说，脚本执行环境中取 document.baseURI 变量的引用时，其实取的是如下的值：

document.baseURI = document.querySelector('base').href || document.location.href;