HTML设置的绝对链接点击后按相对路径跳转的问题咨询

常见原因排查 #

• 检查渲染后实际DOM属性：右键点击Patreon图标选择「检查」，查看对应<a>标签的href属性实际渲染值
  • 若属性值并非完整https://patreon.com/buttertoast格式，说明代码在构建、服务端渲染阶段被修改
  • 若属性值完全符合预期，说明是点击事件被拦截导致的跳转异常
• 检查页面<head>内是否存在<base>标签配置错误，异常的base标签会干扰浏览器对链接路径的解析
• 排查是否存在全局JS路由拦截：大部分单页应用会配置全局a标签点击监听，逻辑错误时会将外部链接识别为站内路由，拼接当前域名后跳转
• 检查是否有隐形控制字符：复制粘贴代码时可能引入零宽空格等不可见Unicode字符，导致浏览器无法识别https://协议头，将链接判定为相对路径
• 排查服务端重写规则：检查Nginx、Apache等服务端配置，是否存在错误的路径重写/重定向规则，误将外部链接路径重定向到站内

对应解决方法 #

• 若是渲染阶段链接被篡改：检查所用建站工具（CMS、静态站点生成器等）的外链处理插件/配置，将patreon.com加入外链白名单，禁止工具自动修改外部链接
• 若是JS拦截导致：修改全局a标签点击监听逻辑，增加外部域名判断规则，匹配到非本站域名的链接时不触发路由跳转，保留浏览器默认跳转行为
• 临时规避可给a标签添加新窗口打开属性，大部分路由拦截逻辑会默认忽略新窗口打开的链接：

<a href="https://patreon.com/buttertoast" target="_blank" rel="noopener noreferrer">
  <img src="images/Digital-Patreon-Wordmark_White.png" alt="alt" class="u-image u-image-default u-image-1" data-image-width="2430" data-image-height="495">
</a>

• 存在隐形字符的情况直接手动重写完整a标签代码，不要从其他文档/页面复制粘贴内容
• 修正服务端错误的重定向、重写规则，排除对外部链接路径的匹配逻辑

内容的提问来源于stack exchange，提问作者DADD