Angular7中ngOnInit内HTTPS跳HTTP时window.location.href失效怎么解决

问题根因分析 #

你遇到的跳转不生效问题，90%以上的概率是以下两种原因导致：

1. 你的站点配置了Strict-Transport-Security（HSTS）响应头，浏览器会强制所有访问走HTTPS协议，哪怕你代码写了跳转到HTTP，浏览器也会自动把请求升级回HTTPS，从观感上就是跳转没触发。
2. Angular的NgZone路由拦截机制，拦截了原生的location跳转操作，导致跳转逻辑没有被浏览器正确执行。

排查验证方法 #

先在你的判断分支里打印替换完成的HTTP地址，手动复制该地址到浏览器地址栏访问，如果还是自动跳回HTTPS，就可以确定是HSTS或者服务端配置导致的问题，和Angular代码无关。

解决方案 #

方案1：跳出NgZone执行原生跳转（客户端层面修复） #

改用window.location.replace执行跳转，同时跳出Angular的NgZone避免路由拦截：

import { Component, OnInit, NgZone } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class YourComponent implements OnInit {
  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    const currentUrl = window.location.href.trim().toLowerCase();
    if (currentUrl.startsWith('https://')) {
      const httpUrl = currentUrl.replace('https://', 'http://');
      // 跳出Angular zone执行原生跳转
      this.ngZone.runOutsideAngular(() => {
        window.location.replace(httpUrl);
      });
    }
  }
}

方案2：服务端层面处理跳转（更推荐） #

客户端跳转很容易受浏览器安全策略限制，直接在反向代理或者后端服务层面做301重定向可靠性更高，比如Nginx可以直接加如下配置：

server {
    listen 443 ssl;
    server_name 你的实际域名;
    # 你的原有SSL证书配置
    return 301 http://$host$request_uri;
}

方案3：清除HSTS配置 #

如果确认是HSTS导致的问题，先移除服务端响应头中的Strict-Transport-Security字段，或者将该字段的max-age值设置为0，清除浏览器本地已缓存的HSTS规则后再测试。

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