Angular SSR规范URL配置问题：HTTPS站点显示HTTP链接的修复方法

这个问题在Angular SSR场景里挺常见的——服务器端渲染时，this.doc.URL获取的是服务器内部请求的URL（比如本地开发的http://localhost:4000，或者服务器内部代理的HTTP链接），而非用户实际访问的HTTPS地址，所以才会导致canonical链接显示为HTTP。

这里给你两种靠谱的解决思路：

方案一：从请求头获取实际访问的协议与主机（推荐） #

这种方法能精准匹配用户实际访问的地址，适合多域名或动态部署的场景：

1. 在server.ts中传递请求信息
   打开Angular Universal的server.ts文件，在渲染模块时注入请求的协议和主机信息：

   server.get('*', (req, res) => {
     res.render(indexHtml, {
       req,
       providers: [
         { provide: APP_BASE_HREF, useValue: req.baseUrl },
         // 新增两个provider，传递请求的协议和主机
         { provide: 'REQUEST_PROTOCOL', useValue: req.protocol },
         { provide: 'REQUEST_HOST', useValue: req.get('host') }
       ]
     });
   });
   

2. 在组件/服务中构造正确的Canonical URL
   在你设置canonical链接的组件或服务里，注入刚才定义的两个值，然后拼接出正确的HTTPS地址：

   import { Inject, Component } from '@angular/core';
   import { DOCUMENT } from '@angular/common';
   
   @Component({...})
   export class YourComponent {
     constructor(
       @Inject(DOCUMENT) private doc: Document,
       @Inject('REQUEST_PROTOCOL') private reqProtocol: string,
       @Inject('REQUEST_HOST') private reqHost: string
     ) {}
   
     setCanonicalUrl() {
       const link: HTMLLinkElement = this.doc.createElement('link');
       link.setAttribute('rel', 'canonical');
       this.doc.head.appendChild(link);
   
       // 提取当前路径（去掉原URL的协议和主机部分）
       const path = this.doc.URL.replace(/^https?:\/\/[^\/]+/, '');
       // 强制使用HTTPS构造最终URL
       const canonicalUrl = `https://${this.reqHost}${path}`;
   
       link.setAttribute('href', canonicalUrl);
     }
   }
   

方案二：直接替换协议（简单粗暴） #

如果你的网站固定使用HTTPS且域名单一，可以直接把原URL中的HTTP协议替换成HTTPS：

let link: HTMLLinkElement = this.doc.createElement('link'); 
link.setAttribute('rel', 'canonical'); 
this.doc.head.appendChild(link); 
let url = this.doc.URL.replace(/^http:/, 'https:'); // 正则替换开头的http:为https:
link.setAttribute('href', url);

这种方法不需要修改server.ts，代码改动最小，但如果你的服务同时支持HTTP和HTTPS（不推荐），可能会出现错误替换的情况。

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