Angular 4中base href问题：点击动态URL跳转至本地而非目标网站

这个问题我太熟了！之前帮同事排查过一模一样的情况——问题出在相对路径和绝对路径的解析逻辑上：你从API拿到的google.com属于相对路径，而<base href="/">会告诉浏览器，所有相对路径都以当前站点的根目录（也就是localhost:4200/）为基准，所以点击后自然就拼成了localhost:4200/google.com。

给你几个实用的解决办法：

• 给URL补全协议前缀
  最直接的方式是判断URL是否包含http://或https://，如果没有就手动加上。写个简单的处理函数就行：

  function getValidExternalUrl(url) {
    // 用正则检查是否已有协议前缀
    const hasProtocol = /^https?:\/\//i.test(url);
    if (!hasProtocol) {
      // 默认用https，你也可以根据需求改成http
      return `https://${url}`;
    }
    return url;
  }
  

  然后在渲染链接的时候用这个函数处理，比如Vue里可以这么写：

  <a :href="getValidExternalUrl(apiReturnedUrl)" target="_blank">打开外部链接</a>
  

• 避免用前端路由组件跳转外部链接
  如果你用了Vue Router、Angular Router这类框架，别用框架自带的路由组件（比如<router-link>）来跳外部链接，这类组件会优先走前端路由规则，还是会拼成本地路径。直接用原生的<a>标签就好。

• 可选：补充www前缀（按需）
  如果后端返回的URL有时候不带www，你可以在函数里额外判断补充，比如：

  function getValidExternalUrl(url) {
    let processedUrl = url;
    // 补协议
    if (!/^https?:\/\//i.test(processedUrl)) {
      processedUrl = `https://${processedUrl}`;
    }
    // 补www（如果需要的话，根据实际场景调整）
    if (!/^https?:\/\/www\./i.test(processedUrl)) {
      processedUrl = processedUrl.replace(/^(https?:\/\/)/, '$1www.');
    }
    return processedUrl;
  }
  

  不过这个要看后端返回的URL格式，比如有些域名本身就不需要www（比如baidu.com和www.baidu.com都能访问），所以按需添加就行。

这样处理后，浏览器就会识别出这是外部绝对路径，直接跳转到对应的网站啦！

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