Angular与.NET Core容器化通信报错net::ERR_NAME_NOT_RESOLVED求助

问题根源 #

你遇到的net::ERR_NAME_NOT_RESOLVED错误，核心原因是：Angular代码在浏览器中运行，浏览器属于宿主机网络，无法解析Docker Compose内部的服务名称backend。Docker服务名仅在Docker创建的内部网络中有效，浏览器无法识别这个域名。

修复步骤 #

1. 修改Angular的API请求路径 #

将硬编码的http://backend:5000/api/WeatherForecast改为相对路径/api/WeatherForecast，这样请求会自动发送到当前页面的服务器（即Nginx），再由Nginx转发到后端服务。

修改后的Angular代码：

export class AppComponent {
  
  constructor(private http: HttpClient) {
    this.http.get<string[]>('/api/WeatherForecast').subscribe(values => {
      console.log(values);
    });
  }
}

2. 通过Nginx访问应用 #

测试时必须访问Nginx暴露的端口81（即http://localhost:81），而不是直接访问Angular容器的4201端口。只有这样，请求才会经过Nginx的代理规则转发：

• 所有/api/开头的请求会被转发到http://backend:5000
• 其他请求会转发到Angular容器

3. 验证Nginx配置（可选） #

你的Nginx配置已经正确设置了代理规则，无需修改：

events {}
http {
  server {
    listen 80;    
    
    location /api/ {
     proxy_pass         http://backend:5000; 
    }

    location / {
      proxy_pass         http://client:80;
    }
  }
}

这里/api/的代理会自动将请求路径拼接，比如/api/WeatherForecast会转发到http://backend:5000/api/WeatherForecast，完全匹配后端API路径。

4. 确保服务启动顺序（可选） #

虽然depends_on确保了backend先启动，但如果后端服务启动较慢，可能导致Angular初始化时请求失败。可以在Angular代码中添加重试逻辑，或者在后端服务中添加健康检查，确保服务就绪后再接收请求。

验证流程 #

1. 重新构建并启动所有容器：docker-compose up --build
2. 在浏览器中访问http://localhost:81
3. 打开浏览器控制台，查看是否成功获取到WeatherForecast数据

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