Azure App Service多容器部署：React如何访问未公开的Flask后端？

我正尝试在Azure Web App for Containers上部署多容器Web应用，本地通过docker-compose运行React前端和Flask后端镜像一切正常，但在Azure环境中，前端的Axios POST请求无法成功。我了解Azure仅对外公开80端口，想知道在二者同属一个App Service的情况下，前端能否访问Flask API？

我已尝试使用Docker服务名（带/不带端口号）作为请求地址，但均失败：要么因前端采用HTTPS协议而请求HTTP地址，要么使用HTTPS时地址无法解析。相关代码如下：

const backendUrl = "https:backend:5000/api/upload"; // 我试过多种不同的地址

try {
  onUploadStart();
  const response = await axios.post(backendUrl, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
  onUploadSuccess(response);
} catch (error) {
  onUploadError("Error uploading file. Please try again.");
  console.error("Error:", error);
}
};

我原本预期该请求能访问后端容器，但发现POST请求始终在客户端浏览器执行，而Azure仅暴露前端，导致请求失败。请问是否有办法实现两个容器的内部通信？

我的docker-compose.yml配置如下：

services:
  frontend:
    image: somefrontend
    ports:
      - "3000:80"
    depends_on:
      - backend

  backend:
    image: somebackend  
    ports:
      - "5000:5000"
    environment:
      - GEMINI_API_KEY= somekey 

我想了解在后端不对外公开的情况下，同Azure App Service中的前端能否通过POST请求访问后端？

可以实现，核心问题在于浏览器端的请求无法直接访问Docker内部服务名（浏览器处于客户端环境，不在Azure App Service的容器网络内），可通过以下两种方式解决：

方式一：配置前端反向代理（推荐） #

通过反向代理让浏览器请求当前域名的API路径，由前端容器内部转发到后端服务，避免浏览器直接访问内部服务名。

1. 修改前端请求地址
   将代码中的backendUrl改为相对路径：

   const backendUrl = "/api/upload";
   

2. 配置前端容器的代理规则

   • 若使用Create React App，在package.json中添加代理配置：

     "proxy": "http://backend:5000"
     

   • 若使用Nginx部署前端（你的前端容器映射80端口，大概率基于Nginx），修改Nginx配置文件（如nginx.conf），添加反向代理规则：

     location /api {
         proxy_pass http://backend:5000;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
     }
     

   完成后重新构建前端镜像，确保配置生效。

方式二：利用容器内部网络访问 #

Azure Web App的多容器处于同一内部网络，前端容器可通过backend:5000访问后端，但这个地址仅在容器内部有效，不能直接在浏览器代码中使用。因此需要前端容器作为中间层，转发浏览器的请求到后端，本质和反向代理逻辑一致。

可以通过环境变量区分开发和生产环境：

• 本地开发时使用http://localhost:5000/api/upload
• Azure部署时，前端容器内部请求http://backend:5000/api/upload，浏览器端仍请求前端容器的相对路径。

关键注意事项 #

• 禁止在浏览器端代码中直接使用backend:5000，该服务名仅在容器内部网络可解析。
• 无需在docker-compose.yml中映射后端的5000端口到外部（可删除ports: - "5000:5000"），避免不必要的暴露。
• 确保Flask后端监听0.0.0.0:5000，而非仅监听localhost，否则前端容器无法访问。

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