Docker化React应用无法访问同网络下的Docker化Flask API

React应用运行在浏览器中，而非Nginx容器内部。你在代码里用http://goals-api:105调用API时，浏览器会尝试解析这个域名，但宿主机器的DNS不认识Docker Compose定义的服务名goals-api，因此触发err_name_not_resolved错误。

提供两种可行方案，按需选择：

方案一：Nginx反向代理（生产环境推荐） #

修改Nginx配置，添加反向代理规则，让前端请求通过Nginx转发到Flask服务：

server {
    listen       3000;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index index.html;
    error_page   500 502 503 504  /50x.html;

    location / {
        try_files $uri $uri/ =404;
        add_header Cache-Control "no-cache";
    }

    location /static {
        expires 1y;
        add_header Cache-Control "public";
    }

    # 新增反向代理规则，匹配API请求路径
    location /api {
        proxy_pass http://goals-api:105;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

同时修改React代码中的Axios请求地址为相对路径：

// 原请求
axios.get('http://goals-api:105/api/goals')
// 修改后
axios.get('/api/goals')

这样浏览器发送的请求会先到Nginx容器，再由Nginx转发到Docker网络内的goals-api:105，避开浏览器解析Docker服务名的问题。

方案二：直接使用宿主机器地址 #

如果不需要Nginx代理，可将React代码中的API地址改为宿主机器的http://localhost:105（部署到服务器时替换为服务器公网IP/域名）：

axios.get('http://localhost:105/api/goals')

缺点：在其他设备访问前端时，localhost会指向访问设备本身，而非部署API的机器，仅适合本地测试场景。

depends_on仅保证容器启动顺序，不确保API服务完全就绪。若Flask启动较慢，可添加健康检查确保API就绪后再启动前端容器：
在docker-compose.yml的goals-api服务中添加：

healthcheck:
    test: ["CMD", "curl", "-f", "http://localhost:105/health"] # 替换为你的健康检查端点
    interval: 5s
    timeout: 5s
    retries: 5

然后修改goals-app服务的depends_on：

depends_on:
    goals-api:
      condition: service_healthy

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