使用Axios获取远程HTML后a标签href被替换为localhost的问题

首先明确两个关键事实：

• 浏览器会自动将相对路径的href解析为当前页面的域名（比如localhost:8080），这是默认的URL解析行为。
• 如果你的response.data里确实包含完整的带IP端口的绝对URL（如http://192.168.110.83:8080/signed/），浏览器Elements面板显示的localhost路径只是解析后的显示值，实际DOM元素的原始href属性并没有被替换——你可以通过document.querySelector('#content a').getAttribute('href')验证，跳转时依然会指向原始IP地址。

如果response.data里的a标签用的是相对路径（比如/signed/），可以通过以下方式手动补全远程地址来保留目标路径：

方法1：插入前批量替换HTML内容 #

// 定义远程服务器的基础地址
const remoteRoot = 'http://192.168.110.83:8080';
// 替换所有根相对路径的href为完整绝对URL
const processedHtml = response.data.replace(/href="\/([^"]+)"/g, `href="${remoteRoot}/$1"`);
// 插入处理后的HTML
document.getElementById('content').innerHTML = processedHtml;

方法2：插入后遍历DOM修改属性 #

如果远程返回的路径结构更复杂（比如非根相对的相对路径），可以遍历插入后的DOM元素逐个调整：

document.getElementById('content').innerHTML = response.data;
const remoteRoot = 'http://192.168.110.83:8080';
// 遍历所有a标签，补全远程地址
const links = document.querySelectorAll('#content a');
links.forEach(link => {
  const originalHref = link.getAttribute('href');
  // 跳过已经是绝对URL的链接
  if (!originalHref.startsWith('http')) {
    link.href = `${remoteRoot}${originalHref}`;
  }
});

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