如何让Angular应用运行在https://localhost？适配OAuth无端口重定向URI

一、实现方法 #

1. 临时启动（单次生效） #

直接在终端用Angular CLI命令指定HTTPS和443端口（HTTPS默认端口），注意需要管理员/root权限（因为443是系统特权端口）：

# Windows 需用管理员身份打开命令提示符/PowerShell
ng serve --ssl --port 443

# Mac/Linux 需加sudo
sudo ng serve --ssl --port 443

2. 持久化配置（永久生效） #

修改项目根目录下的angular.json文件，找到对应项目的serve配置节点，添加/修改port和ssl选项：

"projects": {
  "your-project-name": {
    "architect": {
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          "browserTarget": "your-project-name:build",
          "port": 443,
          "ssl": true
          // 可选：如果需要自定义SSL证书，添加以下配置
          // "sslCert": "./path/to/your/cert.pem",
          // "sslKey": "./path/to/your/key.pem"
        }
      }
    }
  }
}

修改后直接运行ng serve（同样需要管理员/root权限），应用就会自动运行在https://localhost。

二、此举的具体含义 #

• 适配OAuth重定向要求：你的OAuth重定向URI不包含端口，而HTTPS默认端口是443，浏览器访问https://localhost时会自动使用443端口，刚好匹配重定向URI格式。
• 符合常规访问习惯：标准HTTPS服务默认使用443端口，用户访问时无需手动输入端口号，和普通域名的访问逻辑一致。
• 权限与安全限制：443是系统保留的特权端口，必须用管理员/root权限启动服务；Angular默认生成的自签名证书会被浏览器标记为“不安全”，需要手动信任证书才能正常使用（否则可能导致OAuth回调失败）。
• 仅适用于开发环境：Angular CLI的dev-server是为开发设计的，生产环境部署时需要用Nginx、Apache等专业服务器配置HTTPS监听443端口，并使用合法的SSL证书（如Let's Encrypt证书）。

三、额外注意点 #

• 确保你的OAuth服务提供商已将https://localhost添加到允许的重定向URI列表中，否则回调会被拒绝。
• 如果浏览器提示证书不安全，可在浏览器设置中导入Angular生成的自签名证书（默认路径是项目根目录下的node_modules/@angular-devkit/build-angular/src/angular-cli-files/assets/ssl）。

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