本文探讨在文档构建器等动态环境中，`window.location.origin`无法准确获取网站有效根路径的问题。针对readthedocs等平台，通过发起http `head`请求并追踪重定向，可以异步获取到实际的基准url，从而解决版本切换时页面重定向到正确根目录的需求。这种方法尤其适用于ci/cd工具链下部署的网站。
网站根路径识别的挑战
在Web开发中，我们通常认为网站的根路径就是其域名，可以通过 window.location.origin 来获取。例如，对于 https://example.com/path/to/page.html，其 origin 是 https://example.com。然而，在某些特定的部署场景，尤其是使用自动化文档构建器（如ReadTheDocs）或持续集成/持续部署（CI/CD）工具时，网站的“有效根路径”可能并非简单的域名，而是一个包含子路径的URL。
例如，在ReadTheDocs上，https://pydata-sphinx-theme.readthedocs.io 可能会自动重定向到 https://pydata-sphinx-theme.readthedocs.io/en/stable/。这意味着对于用户而言，https://pydata-sphinx-theme.readthedocs.io/en/stable/ 才是其文档的真正“根目录”。当我们需要实现一个版本切换功能，将用户从一个不存在的页面重定向到特定版本的文档根目录时（例如，从 https://pydata-sphinx-theme.readthedocs.io/en/stable/examples/index.html 跳转到 v0.9 版本的根目录 https://pydata-sphinx-theme.readthedocs.io/en/v0.9.0/），仅仅依赖 window.location.origin 就会导致错误。
window.location.origin 仅返回协议、主机名和端口。它无法感知到服务器端进行的HTTP重定向，也无法识别出像 /en/stable/ 这样的有效子路径作为网站的实际入口。
传统方法的局限性
最初的尝试可能如下所示，它使用 window.location.origin 作为基准URL：
/**
* 检查给定URL是否为相对路径，并尝试使用window.location.origin生成绝对URL。
*
* @param {string} url 需要检查和转换的URL。
* @returns {string} 转换后的绝对URL或原始URL。
*/
function makeAbsoluteUrl(url) {
// 匹配非绝对URL的正则表达式
const pattern = /^(?!(?:[a-z]+:)?\/\/)/i;
const base_url = window.location.origin; // 这里的基准URL可能不准确
// 如果是相对URL，则拼接
if (pattern.test(url)) {
// 确保拼接时处理好斜杠
const normalizedBase = base_url.endsWith('/') ? base_url.slice(0, -1) : base_url;
const normalizedUrl = url.startsWith('/') ? url.slice(1) : url;
return `${normalizedBase}/${normalizedUrl}`;
}
return url;
}上述代码在大多数标准网站上工作良好，但对于像ReadTheDocs这样，其根URL实际上是一个重定向目标（如 https://pydata-sphinx-theme--1344.org.readthedocs.build 重定向到 https://pydata-sphinx-theme--1344.org.readthedocs.build/en/1344/）的场景，它会失败。它只会得到 https://pydata-sphinx-theme--1344.org.readthedocs.build，而我们期望的是 https://pydata-sphinx-theme--1344.org.readthedocs.build/en/1344/。
利用HTTP重定向发现真实根路径
解决这个问题的关键在于，服务器在进行重定向时，会将请求导向其真正的入口路径。我们可以利用 fetch API 发送一个 HEAD 请求到 window.location.origin，并观察其最终重定向的URL。fetch API 的 Response 对象有一个 url 属性，它会返回请求经过所有重定向后的最终URL。
这种方法的优点是：
- 动态性：它能适应不同的部署环境，无论是本地开发、生产环境还是CI/CD环境。
- 准确性：它能获取到服务器实际配置的、包含子路径的“有效根路径”。
- 非侵入性：只发起 HEAD 请求，不下载响应体，效率高。
解决方案实现
下面是利用 fetch API 实现的 makeAbsoluteUrl 函数：
/**
* 检查给定URL是否为相对路径，并根据网站的实际根路径生成绝对URL。
* 特别适用于处理通过HTTP重定向确定实际根路径的场景。
*
* @param {string} url 需要检查和转换的URL。
* @returns {Promise} 返回一个Promise，解析为转换后的绝对URL。
*/
async function makeAbsoluteUrl(url) {
// 匹配非绝对URL（不以协议或双斜杠开头的URL）
const pattern = /^(?!(?:[a-z]+:)?\/\/)/i;
let effectiveBaseUrl;
try {
// 发起HEAD请求到当前页面的origin，追踪重定向以获取真实的基准URL
// res.url 将包含最终重定向后的URL
const response = await fetch(window.location.origin, { method: "HEAD" });
effectiveBaseUrl = response.url;
} catch (error) {
console.error("获取网站有效根路径失败，回退到window.location.origin:", error);
// 如果获取失败（例如网络错误或CORS限制），回退到window.location.origin作为基准
effectiveBaseUrl = window.location.origin;
}
// 如果URL是相对路径，则将其与有效基准URL拼接
if (pattern.test(url)) {
// 确保基准URL末尾没有斜杠，且相对URL开头没有斜杠，避免双斜杠
const normalizedBase = effectiveBaseUrl.endsWith('/') ? effectiveBaseUrl.slice(0, -1) : effectiveBaseUrl;
const normalizedUrl = url.startsWith('/') ? url.slice(1) : url;
return `${normalizedBase}/${normalizedUrl}`;
}
// 如果URL已经是绝对路径，则直接返回
return url;
}
// 示例用法 (在实际应用中，您可能需要在一个异步函数中调用它)
async function exampleUsage() {
const relativePath = "some/page.html";
const absolutePath = await makeAbsoluteUrl(relativePath);
console.log(`转换后的绝对路径: ${absolutePath}`);
const existingAbsolutePath = "https://example.com/another/page.html";
const result = await makeAbsoluteUrl(existingAbsolutePath);
console.log(`已是绝对路径: ${result}`);
}
// 调用示例
exampleUsage(); 注意事项与总结
- 异步操作：由于 fetch API 是异步的，makeAbsoluteUrl 函数也必须是 async 的，并且会返回一个 Promise。在调用此函数时，需要使用 await 或 .then() 来处理其结果。
- CORS：虽然 HEAD 请求通常受CORS（跨域资源共享）限制较少，但在某些严格配置的环境下，如果 window.location.origin 与重定向目标域不同，可能会遇到CORS问题。但在大多数同源或子域重定向的场景下，这不会成为问题。
- 特定场景优化：此解决方案特别适用于依赖HTTP重定向来定义其有效根路径的网站，例如ReadTheDocs、Netlify等静态网站托管服务，以及通过CDN或反向代理提供服务的复杂部署。对于不进行此类重定向的普通网站，直接使用 window.location.origin 可能就足够了。
- 错误处理：代码中包含了 try...catch 块，以在 fetch 请求失败时（例如网络离线或CORS错误）提供一个回退机制，即使用 window.location.origin。
通过上述方法，我们能够更健壮地识别出网站的实际有效根路径，从而在复杂的部署环境中实现精确的URL构建和重定向逻辑，提升用户体验和应用稳定性。
