URL以www开头无协议时跳转至localhost而非目标地址问题求助

问题原因 #

当你传入www.example.com这类不带http://或https://前缀的地址时，浏览器会把它识别为相对路径，而非独立的绝对URL。此时浏览器会基于当前页面的域名（也就是你本地开发环境的http://localhost:4200）拼接路径，最终就变成了http://localhost:4200/www.example.com。

而如果URL带https://前缀，浏览器会明确识别这是一个绝对URL，直接跳转到目标地址，不会和当前域名拼接。

解决办法 #

在调用window.open之前，先给不带协议前缀的URL自动补上https://（或根据需求补http://），示例代码修改如下：

openURL() {
  let targetUrl = this.url;
  // 用正则检查是否已有http/https协议开头
  if (!/^https?:\/\//i.test(targetUrl)) {
    targetUrl = `https://${targetUrl}`;
  }
  window.open(targetUrl, '_blank').focus();
}

这样不管输入的是带协议还是不带协议的地址，都能正确跳转到目标网站。

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