Angular CLI 支持子域反向代理

Posted 2023-03-23

【中文标题】Angular CLI 支持子域反向代理

【英文标题】：Angular CLI support for subdomain reverse proxy

【发布时间】：2019-04-04 22:47:43

【问题描述】：

假设 id 喜欢具有以下反向代理 url 重定向（用于页面加载）：

https://abc.example.develop > http://localhost:4200
https://xyz.example.develop > http://localhost:4201

在 angular (cli) 或 nx 中是否有对子域的内置反向代理支持？最近 firebase 增加了对多个子域的支持，但是考虑到 1）它们是不同的域 2）firebase apis 需要 https，如何在开发中为它们服务？

proxy.config.js 方式 (https://angular.io/guide/build#bypass-the-proxy) 和环境文件方式看起来都像是为单个应用程序设计的。我需要自己做反向代理吗？

【问题讨论】：

你能提供更多关于设置的信息吗？您想通过浏览器访问 abc.example.com 和 xyz.example.com 吗？或者您是从一个子域到另一个子域进行 XHR 调用？内置支持可以帮助您处理后者（您需要在每个需要执行此操作的应用程序中修改 proxy.config）。对于前一种情况，您需要自己设置（使用 nginx、使用容器等）

正确。它是前一种情况（网址重定向）

【参考方案1】：

您必须在 Angular 提供的功能之外执行此操作，因为它是为您的本地计算机定制的。

最简单的选择是在本地运行 nginx（或其他反向代理）（参见https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/#passing-a-request-to-a-proxied-server）

修改你的 HOSTS 文件不会转发端口，所以如果你想走那条路，你需要使用https://abc.example.develop:4200

【参考方案2】：

我创建了a solution，它使用 Angular CLI 执行，并且代理在 Node.js 服务器上运行。 Nx 支持目前在proposal stage 中。