如何让Angular应用同时在localhost和host.docker.internal上可访问？

背景 #

运行在浏览器中的Angular应用，后端API请求地址由environment-*.ts里的protocol + domain + port与接口path拼接而成。本地开发时可以用proxy配置覆盖这部分地址，但仅在ng serve启动时生效；执行ng build后，这部分配置会被固化到./dist产物中。

以staging环境为例，理想的API地址是http://localhost:4200，方便本地通过docker-compose一键启停前后端及数据库服务，无需修改系统hosts。但e2e测试通常以Docker镜像运行，容器内的localhost仅指向自身回环，无法访问本地主机的后端服务。

针对这个问题，有两种常规解决方式：

• 用--network host启动e2e容器，但该方案在Docker for Mac中无法生效
• 用--add-host host.docker.internal:host-gateway启动容器，通过host.docker.internal访问本地主机

Mac开发者只能用第二种方案，但这意味着前端API请求要指向host.docker.internal而非localhost，需要新增环境配置文件并重新构建，无法复用单次构建的产物。

核心问题 #

能否通过单次构建，让Angular应用同时支持本地浏览器直接访问，以及本地Docker容器内的e2e测试访问？

注：曾尝试修改本地/etc/hosts将localhost映射到host.docker.internal的IP，但未生效（映射其他域名正常，仅localhost无效果）。

可行解决方案 #

方案1：动态适配API地址（运行时判断） #

在Angular的环境配置文件中，不写死API域名，而是通过运行时逻辑动态获取：

1. 在environment.ts中定义动态的API基础地址：

export const environment = {
  production: true,
  get apiBaseUrl(): string {
    // 优先读取容器注入的环境变量，本地运行时自动 fallback 到 localhost
    const apiHost = window['env']?.API_HOST || 'localhost:4200';
    return `http://${apiHost}`;
  }
};

2. Docker运行前端容器时，通过环境变量注入API_HOST：
   启动容器时添加参数：

-e API_HOST=host.docker.internal:4200

同时需要在前端容器的启动脚本中，将环境变量注入到window对象（比如通过Nginx的模板渲染，或者自定义启动脚本生成全局变量）。

本地运行时，由于没有注入API_HOST，会自动使用localhost:4200，无需额外配置。

方案2：使用相对路径 + 反向代理 #

将API地址改为相对路径，通过不同环境的反向代理配置适配目标地址，无需修改前端代码：

1. 修改environment.ts中的API基础地址为相对路径：

export const environment = {
  production: true,
  apiBaseUrl: '/api'
};

2. 本地开发时，通过proxy.conf.json转发请求：

{
  "/api/*": {
    "target": "http://localhost:4200",
    "secure": false,
    "changeOrigin": true
  }
}

启动时指定proxy配置：

ng serve --proxy-config proxy.conf.json

3. Docker容器内运行前端时，通过Nginx反向代理转发请求：
   在Nginx配置文件中添加：

location /api/ {
    proxy_pass http://host.docker.internal:4200/;
}

这样，不管是本地浏览器访问前端，还是容器内的e2e测试访问前端，API请求都会被正确转发到对应的后端地址。

关于修改hosts失败的说明 #

localhost是系统保留的回环地址，多数操作系统会优先使用自身的回环解析逻辑，忽略/etc/hosts中的映射配置，因此修改localhost的hosts条目无法生效是正常现象。

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