使用$location.url跳转外部URL时避免拼接本地主机地址的方法

你碰到的这个坑其实很常见——$location.url()这个方法本来就是为AngularJS单页应用的内部路由跳转设计的，它会把你传入的字符串当成应用内的路由路径，自动拼在当前页面的基地址后面，所以才会出现把https://www.paypal.com变成http://127.0.0.1:50966/index.html#/https://www.paypal.com这种奇怪的URL。

要解决这个问题，你需要用专门处理浏览器页面跳转的方式，而不是单页路由的方法：

• 方法一：直接使用原生JavaScript的window.location.href
  这是最直接的方式，它会让浏览器直接加载指定的完整URL，不管是外部链接还是内部地址都能正确处理：

  var url = res.response.data.link;
  window.location.href = url;
  

• 方法二：用AngularJS封装的$window服务（更符合框架最佳实践）
  如果你想遵循AngularJS的依赖注入规范，避免直接操作全局对象window，可以注入$window服务来实现同样的效果：

  // 记得在控制器或服务中注入$window
  app.controller('YourController', ['$window', function($window) {
    var url = res.response.data.link;
    $window.location.href = url;
  }]);
  

如果后端返回的链接可能混合了内部路由和外部URL，还可以加个简单的判断来区分处理：

var url = res.response.data.link;
if (url.startsWith('http://') || url.startsWith('https://')) {
  // 外部链接用跳转
  $window.location.href = url;
} else {
  // 内部路由用$location.url()
  $location.url(url);
}

这样就能完美避免外部URL被拼接本地地址的问题啦～

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