如何配置Angular 17开发服务器实现HTTP重定向到HTTPS？

你当前遇到的404问题，原因是Angular开发服务器开启SSL后，只会监听配置的HTTPS端口（这里是4200），同一端口的HTTP请求没有对应的服务处理，因此返回404。Angular开发服务器本身没有内置HTTP转HTTPS的重定向能力，以下是两种可行的解决方法：

方案一：前端代码层面重定向（有局限性） #

这种方法仅当HTTP请求能成功加载Angular应用时生效（比如开发服务器同时响应HTTP请求的场景）。在src/main.ts中添加协议检查逻辑：

if (typeof window !== 'undefined' && window.location.protocol === 'http:') {
  window.location.replace(`https://${window.location.host}${window.location.pathname}${window.location.search}`);
}

注意：如果当前HTTP请求返回404，这段代码不会被执行，因此这种方法无法直接解决你现在的问题，仅适用于HTTP端口能正常加载应用的场景。

方案二：Node.js脚本搭建重定向服务器（推荐） #

通过一个轻量的Node.js脚本监听HTTP端口，将所有请求重定向到HTTPS端口，无需修改Angular应用代码：

1. 在项目根目录创建redirect-server.js文件：

const http = require('http');

// 配置目标HTTPS端口（你的Angular开发服务器端口）
const targetHttpsPort = 4200;
// 配置用于HTTP访问的端口（可自定义）
const httpPort = 8080;

const server = http.createServer((req, res) => {
  const redirectUrl = `https://localhost:${targetHttpsPort}${req.url}`;
  res.writeHead(301, {
    'Location': redirectUrl,
    'Cache-Control': 'no-cache'
  });
  res.end();
});

server.listen(httpPort, () => {
  console.log(`HTTP重定向服务器已启动：访问 http://localhost:${httpPort} 将自动跳转到 https://localhost:${targetHttpsPort}`);
});

2. 修改package.json的启动脚本，同时启动重定向服务器和Angular开发服务器：

"scripts": {
  "start": "node redirect-server.js & ng serve",
  // 保留其他原有脚本
}

3. 运行npm start，之后访问http://localhost:8080就会自动跳转到你的HTTPS地址。

可选：让HTTP和HTTPS使用同一端口 #

如果希望用户访问http://localhost:4200直接跳转，需要调整Angular的HTTPS端口：

• 修改redirect-server.js中的targetHttpsPort为4201，httpPort为4200
• 更新启动脚本，指定Angular的端口：

"scripts": {
  "start": "node redirect-server.js & ng serve --port 4201"
}

这样用户访问http://localhost:4200就会自动跳转到https://localhost:4201。

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