Pi-hole Web界面在子目录部署时的重载循环问题解析

问题背景

Pi-hole是一款流行的开源DNS服务器和广告拦截工具，其Web管理界面通常部署在根目录下。然而，当用户尝试将Pi-hole Web界面部署在子目录（如/pihole/）时，会遇到页面不断重载的问题。

问题根源分析

经过技术分析，发现该问题主要源于Web界面JavaScript代码中对路径的硬编码检查。具体来说，在footer.js文件中存在以下关键问题代码：

if (globalThis.location.pathname !== "/admin/login") updateInfo();

这段代码会检查当前路径是否精确匹配"/admin/login"，当部署在子目录时，实际路径变为"/pihole/admin/login"，导致条件判断始终为真，从而触发无限重载循环。

解决方案

针对这一问题，社区提出了两种解决方案：

1. 路径检查优化方案： 将精确匹配改为检查路径是否以"/admin/login"结尾：

   if (!globalThis.location.pathname.endsWith("/admin/login")) updateInfo();
   

2. 使用相对路径方案： 将硬编码的绝对路径"/admin"替换为动态生成的相对路径变量<?=webhome?>，这种方法更具通用性。

实现细节

在实际修复过程中，开发者需要修改多处相关代码：

1. 修改footer.js中的路径检查逻辑
2. 更新设置导出功能中的路径引用
3. 修复查询日志页面中的API URL引用

潜在问题与注意事项

在修复过程中，开发者还发现了一些潜在问题：

1. API URL引用问题：在queries.js中存在未定义的apiUrl变量，可能导致某些功能异常
2. 竞态条件：在某些情况下（如隐私浏览模式），页面切换时可能出现初始化顺序问题
3. 路径一致性：需要确保所有前端代码中的路径引用都采用相对路径或动态生成方式

最佳实践建议

对于需要在子目录部署Pi-hole Web界面的用户，建议：

1. 使用最新开发分支代码，其中已包含相关修复
2. 部署后全面测试所有功能，特别是登录和查询日志页面
3. 关注控制台错误日志，及时发现并解决路径相关问题

通过以上分析和解决方案，用户可以在子目录环境下稳定运行Pi-hole Web管理界面，享受完整的DNS管理和广告拦截功能。