在非域根路径场景下，如何精确获取网站的有效根路径

本文探讨在文档构建器等动态环境中，`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/。

AI小聚

一站式多功能AIGC创作平台，支持AI绘画、AI视频、AI聊天、AI音乐

下载

利用HTTP重定向发现真实根路径

解决这个问题的关键在于，服务器在进行重定向时，会将请求导向其真正的入口路径。我们可以利用 fetch API 发送一个 HEAD 请求到 window.location.origin，并观察其最终重定向的URL。fetch API 的 Response 对象有一个 url 属性，它会返回请求经过所有重定向后的最终URL。

这种方法的优点是：

1. 动态性：它能适应不同的部署环境，无论是本地开发、生产环境还是CI/CD环境。
2. 准确性：它能获取到服务器实际配置的、包含子路径的“有效根路径”。
3. 非侵入性：只发起 HEAD 请求，不下载响应体，效率高。

解决方案实现

下面是利用 fetch API 实现的 makeAbsoluteUrl 函数：

/**
 * 检查给定URL是否为相对路径，并根据网站的实际根路径生成绝对URL。
 * 特别适用于处理通过HTTP重定向确定实际根路径的场景。
 *
 * @param {string} url 需要检查和转换的URL。
 * @returns {Promise<string>} 返回一个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();

注意事项与总结

1. 异步操作：由于 fetch API 是异步的，makeAbsoluteUrl 函数也必须是 async 的，并且会返回一个 Promise。在调用此函数时，需要使用 await 或 .then() 来处理其结果。
2. CORS：虽然 HEAD 请求通常受CORS（跨域资源共享）限制较少，但在某些严格配置的环境下，如果 window.location.origin 与重定向目标域不同，可能会遇到CORS问题。但在大多数同源或子域重定向的场景下，这不会成为问题。
3. 特定场景优化：此解决方案特别适用于依赖HTTP重定向来定义其有效根路径的网站，例如ReadTheDocs、Netlify等静态网站托管服务，以及通过CDN或反向代理提供服务的复杂部署。对于不进行此类重定向的普通网站，直接使用 window.location.origin 可能就足够了。
4. 错误处理：代码中包含了 try...catch 块，以在 fetch 请求失败时（例如网络离线或CORS错误）提供一个回退机制，即使用 window.location.origin。

通过上述方法，我们能够更健壮地识别出网站的实际有效根路径，从而在复杂的部署环境中实现精确的URL构建和重定向逻辑，提升用户体验和应用稳定性。