HTTP请求跳转指定HTTPS链接的JavaScript代码异常排查

首先得指出你当前代码的问题：你用loc.replace('http://','https://secure.example.com/app')这种字符串替换方式，会把原URL里的域名+路径直接拼在新前缀后面。比如用户访问http://example.com/app/page，替换后就变成了https://secure.example.com/appexample.com/app/page——这显然不是你要的精准跳转效果。

正确的解决方案 #

我们需要保留原URL的路径、查询参数和哈希部分，只替换协议和域名。这里给你两种靠谱的实现方式：

方式一：使用现代浏览器支持的URL对象（推荐）

这种方式最简洁，URL对象会自动帮我们处理URL的各个组成部分：

<script language="JavaScript">
  // 仅当当前协议是HTTP时才跳转
  if (window.location.protocol === 'http:') {
    // 基于当前URL创建URL对象
    const targetUrl = new URL(window.location.href);
    // 替换协议为HTTPS
    targetUrl.protocol = 'https:';
    // 替换目标域名
    targetUrl.host = 'secure.example.com';
    // 如果需要强制路径以/app开头（可选，根据你的需求调整）
    // if (!targetUrl.pathname.startsWith('/app')) {
    //   targetUrl.pathname = '/app' + targetUrl.pathname;
    // }
    // 执行跳转
    window.location.href = targetUrl.toString();
  }
</script>

不管用户访问http://example.com/app还是http://example.com/app/any/path?param=1#hash，都会精准跳转到https://secure.example.com/app或https://secure.example.com/app/any/path?param=1#hash。

方式二：兼容旧浏览器的手动拼接方式

如果需要支持IE这类旧浏览器，可以手动提取路径部分拼接：

<script language="JavaScript">
  if (window.location.protocol === 'http:') {
    // 提取原URL的路径、查询参数和哈希
    const pathSegment = window.location.pathname + window.location.search + window.location.hash;
    // 拼接成目标HTTPS URL
    const targetUrl = 'https://secure.example.com' + pathSegment;
    window.location.href = targetUrl;
  }
</script>

这种方式和上面的效果一致，只是手动处理了URL的各个部分。

为什么原代码会出错？ #

举个例子，原URL是http://example.com/app，你的代码执行loc.replace('http://','https://secure.example.com/app')后，相当于把字符串中的http://替换成新前缀，结果就变成了：

https://secure.example.com/app + example.com/app = https://secure.example.com/appexample.com/app

这就是导致拼接错误的核心原因——你没有替换原域名，只是替换了协议前缀。

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