docker-compose中React前端调用Django服务名接口报ERR_NAME_NOT_RESOLVED问题

该报错的核心原因是代码运行环境的网络范围不匹配：

• Docker Compose创建的dtp-network属于容器私有网络，只有同网络下的容器可以通过服务名（比如backend-account）互相解析访问，你进入React容器内部执行curl请求能成功，就是因为容器在该私有网络内。
• 浏览器中打开的React应用，代码实际是运行在你本地电脑的浏览器进程中，你的本地主机并不在Docker的私有网络内，无法识别backend-account这个内部服务名，因此直接出现域名解析失败，请求根本没有进入Docker环境，后端自然不会有请求日志。

方案1：修改前端请求地址（开发环境快速适配） #

你已经在docker-compose配置中把后端端口映射到了本地主机：

• backend-account 容器的8000端口映射到了本地的8080端口
• backend-stream 容器的7000端口映射到了本地的7000端口
  直接修改前端代码中的接口请求前缀即可：
• 原http://backend-account:8000/xxx 替换为 http://localhost:8080/xxx
• 原http://backend-stream:7000/xxx 替换为 http://localhost:7000/xxx
  如果是部署到服务器，将localhost替换为服务器的公网IP或者绑定的域名即可。
  注意修改后需要在Django配置中添加跨域白名单，允许http://localhost:3000的跨域请求，否则会触发CORS报错。

方案2：配置前端开发代理（更规范的开发方案） #

如果不想硬编码接口地址，可以利用React开发服务器的代理功能，所有接口请求先发给前端服务，由前端容器内部转发到对应后端：

1. 单后端场景直接在React项目的package.json中添加配置：

"proxy": "http://backend-account:8000"

2. 多后端场景可以安装http-proxy-middleware包，配置路径匹配规则，不同的接口路径转发到不同的后端服务，比如/api/auth前缀的请求转发到backend-account:8000，/api/stream前缀的请求转发到backend-stream:7000。
   该方案的转发逻辑是在frontend容器内部执行的，容器本身可以正常解析Docker内部服务名，无需暴露后端端口到本地主机，也不需要修改前端代码的接口路径。

生产环境建议 #

生产环境部署时建议统一用Nginx作为入口反向代理，所有请求先到Nginx，静态资源请求返回前端打包产物，接口请求转发到对应的后端服务，不需要暴露多个端口，也能避免跨域问题。

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