Docker容器化Blazor WebApp访问同主机容器化WebApi的配置问题

容器内的localhost指向容器自身，而非Docker宿主机。当Web App容器化后，代码中硬编码的http://localhost:32720/会尝试访问Web App容器内部的32720端口，自然无法连接到宿主机上的API容器。

方法1：使用Docker宿主机的可访问IP（开发环境快速解决） #

• Windows/macOS：Docker提供了内置域名host.docker.internal，直接指向宿主机，修改BaseAddress为：

  builder.Services.AddHttpClient<WeatherForecastDataService>(client =>
  {
       client.BaseAddress = new Uri("http://host.docker.internal:32720/");
  });
  

• Linux：需要使用宿主机的局域网IP（比如192.168.1.100），或者配置Docker的--add-host host.docker.internal:host-gateway参数后使用host.docker.internal：

  docker run -dt -e "ASPNETCORE_ENVIRONMENT=Development" --name weatherappcontainer --add-host host.docker.internal:host-gateway -p32730:80 weatherapp:dev
  

  代码中同样使用http://host.docker.internal:32720/作为BaseAddress。

方法2：使用自定义Docker网络（生产/测试环境推荐） #

创建统一的Docker网络，让两个容器在同一网络内通过容器名直接通信，无需依赖宿主机端口映射：

1. 创建自定义网络：

   docker network create weather-service-network
   

2. 重新启动API容器并加入该网络：

   docker run -dt -e "ASPNETCORE_ENVIRONMENT=Development" --name weatherapicontainer --network weather-service-network weatherapi:dev
   

3. 启动Web App容器并加入同一网络：

   docker run -dt -e "ASPNETCORE_ENVIRONMENT=Development" --name weatherappcontainer --network weather-service-network -p32730:80 weatherapp:dev
   

4. 修改Web App的BaseAddress为API容器名+容器内部端口（无需用宿主机映射的32720）：

   builder.Services.AddHttpClient<WeatherForecastDataService>(client =>
   {
        client.BaseAddress = new Uri("http://weatherapicontainer:8080/");
   });
   

方法3：通过环境变量动态配置（适配多环境） #

避免硬编码地址，通过环境变量传递API地址，灵活适配不同部署环境：

1. 修改Web App代码，从配置中读取API地址：

   builder.Services.AddHttpClient<WeatherForecastDataService>(client =>
   {
       string apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? "http://localhost:32720/";
       client.BaseAddress = new Uri(apiBaseUrl);
   });
   

2. 启动Web App容器时传入环境变量：
   • 用宿主机IP的场景：

     docker run -dt -e "ASPNETCORE_ENVIRONMENT=Development" -e "ApiBaseUrl=http://宿主机IP:32720/" --name weatherappcontainer -p32730:80 weatherapp:dev
     

   • 用自定义网络的场景：

     docker run -dt -e "ASPNETCORE_ENVIRONMENT=Development" -e "ApiBaseUrl=http://weatherapicontainer:8080/" --name weatherappcontainer --network weather-service-network -p32730:80 weatherapp:dev
     

内容的提问来源于stack exchange，提问作者Emmanuel Nuyttens