Docker环境下React应用调用.NET Core API出现net::ERR_NAME_NOT_RESOLVED错误的解决方案咨询

DevOps 小满

2026-4-30

问题分析与解决方案

核心原因

你碰到的net::ERR_NAME_NOT_RESOLVED问题其实是Docker+前端开发的典型误区：

你的React应用代码里的fetch('http://customer-api:5000/api/hc')是在用户的浏览器中执行的，而不是在React容器内部！

Docker桥接网络的DNS解析（比如通过容器名customer-api访问服务）只在容器集群内部生效，浏览器属于宿主机环境，根本不知道customer-api这个主机名对应的IP，自然会解析失败。而你在容器内用curl/ping能成功，是因为这些操作是在Docker网络内部进行的，能正常识别容器名。

解决方案

方案1：开发环境 - 配置React代理

因为你当前用npm start运行React开发服务器，可以通过配置代理让前端请求转发到API容器：

在React项目的package.json中添加一行代理配置：
```
"proxy": "http://customer-api:5000"
```
这个配置是给React开发服务器用的，它会在容器内部把前端请求转发到API服务，浏览器只需要和本地的React开发服务器通信即可。

修改你的fetch代码为相对路径：

async loadData() { 
  try { 
    fetch('/api/hc') 
      .then(function (response) { 
        console.log(response) 
      }); 
  } catch (e) { 
    console.log(e); 
  } 
}

重启React容器，现在浏览器请求/api/hc会被React开发服务器自动转发到customer-api:5000/api/hc，避免了浏览器直接解析Docker容器名的问题。

方案2：开发/测试环境 - 端口映射+宿主机IP

如果不想用代理，可以给Customer API容器映射宿主机端口：

在docker run命令或者docker-compose.yml中给API容器添加端口映射规则：-p 5000:5000
修改fetch请求为宿主机IP+端口：
```
fetch('http://localhost:5000/api/hc')
```
（如果是在其他机器访问，把localhost换成宿主机的局域网IP即可）

方案3：生产环境 - 使用反向代理（比如Nginx）

如果是生产部署，推荐用Nginx作为反向代理，统一处理React静态文件和API请求：

先构建React生产静态文件：执行npm run build生成打包后的静态资源

配置Nginx容器，同时代理React静态资源和API请求：

server {
  listen 80;
  root /usr/share/nginx/html;

  # 处理React单页应用路由
  location / {
    try_files $uri $uri/ /index.html;
  }

  # 转发API请求到customer-api容器
  location /api/ {
    proxy_pass http://customer-api:5000;
    proxy_set_header Host $host;
  }
}

把React的静态文件挂载到Nginx容器中，同时确保Nginx和API容器处于同一Docker网络，这样Nginx就能通过customer-api正常访问API服务，而浏览器只需要访问Nginx的地址即可。

验证建议

不管采用哪个方案，都可以通过浏览器开发者工具的网络面板验证：

确认请求的URL是浏览器能解析的地址（比如localhost:3000/api/hc或者你的宿主机IP）
如果出现跨域错误，需要在.NET Core API中配置CORS策略，允许前端域名的请求

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