Docker环境下React使用Axios调用localhost出现网络错误

数据老陈

2026-6-20

Docker容器中React应用调用后端API出现网络错误问题

我正在尝试用Docker容器运行所有服务，但React应用通过axios调用后端API时在Chrome里报错。调用代码如下：

export const fetchTreeSection = async (
  sectionId: number,
): Promise<TreeSection> => {
  const response = await axios.get<TreeSection>(
    `${API_BASE_URL}/api/ImageNet/treeSection/${sectionId}`,
  );
  return response.data;
};

Chrome控制台报错：

http://localhost:5105/api/ImageNet/treeSection/0
message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK'

但将该URL直接粘贴到新标签页中能正常返回数据。

注意：我不想使用本机IP替代localhost，希望此配置能在其他机器上正常执行。

以下是本地运行的Docker Compose文件：

version: '3.8'
services:
  mssql:
    image: mcr.microsoft.com/mssql/server:2019-latest
    container_name: mssql
    environment:
      SA_PASSWORD: "StrongPassword123"
      ACCEPT_EULA: "Y"
    ports:
      - "1433:1433"
    volumes:
      - mssql-data:/var/opt/mssql
    healthcheck:
      test: /opt/mssql-tools/bin/sqlcmd -S localhost -U sa -P "StrongPassword123" -Q "SELECT 1" || exit 1
      interval: 10s
      retries: 10
      start_period: 10s
      timeout: 3s

  importer:
    build:
      context: ./FinvizDataManager
      dockerfile: Dockerfile.importer
    depends_on:
      mssql:
        condition: service_healthy
    environment:
      ConnectionStrings__DefaultConnection: "Server=mssql,1433;Database=Finviz;Uid=sa;Pwd=StrongPassword123;TrustServerCertificate=True;MultipleActiveResultSets=true;"

  server:
    build:
      context: ./FinvizDataManager
      dockerfile: Dockerfile.server
    depends_on:
      - importer
    environment:
      ConnectionStrings__DefaultConnection: "Server=mssql,1433;Database=Finviz;Uid=sa;Pwd=StrongPassword123;TrustServerCertificate=True;MultipleActiveResultSets=true;"
    ports:
      - "5105:8080"

  react-app:
    build:
      context: ./finviz
      dockerfile: Dockerfile
    ports:
      - "5173:5173"
    environment:
      - VITE_API_BASE_URL=http://localhost:5105
    depends_on:
      - server

volumes:
  mssql-data:
    driver: local

服务器CORS配置部分：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp",
        policyBuilder => policyBuilder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
});
...
app.UseHttpsRedirection();
app.UseCors("AllowReactApp");
app.MapControllers();

问题分析与解决方案

1. 核心原因

浏览器中运行的React应用是从用户本地环境发起请求，而非Docker容器内部。当前问题大概率是后端服务未完全就绪、端口监听地址错误，或是服务启动顺序导致的请求时机不对。

2. 具体解决步骤

（1）确保后端服务完全就绪

depends_on仅保证启动顺序，不保证服务就绪。给server服务添加健康检查，让React应用等后端真正可用后再启动：
修改docker-compose.yml中server服务配置：

server:
  build:
    context: ./FinvizDataManager
    dockerfile: Dockerfile.server
  depends_on:
    - importer
  environment:
    ConnectionStrings__DefaultConnection: "Server=mssql,1433;Database=Finviz;Uid=sa;Pwd=StrongPassword123;TrustServerCertificate=True;MultipleActiveResultSets=true;"
  ports:
    - "5105:8080"
  healthcheck:
    test: ["CMD", "curl", "-f", "http://localhost:8080/health"] # 需后端提供健康检查接口，若无可替换为检查端口的命令
    interval: 5s
    retries: 10
    start_period: 10s
    timeout: 3s

同时修改react-app的依赖条件：

react-app:
  build:
    context: ./finviz
    dockerfile: Dockerfile
  ports:
    - "5173:5173"
  environment:
    - VITE_API_BASE_URL=http://localhost:5105
  depends_on:
    server:
      condition: service_healthy

（2）检查后端服务器监听地址

确保后端服务监听0.0.0.0而非localhost，否则容器外部无法访问。ASP.NET Core中可显式配置：

var builder = WebApplication.CreateBuilder(args);
// ...其他配置
var app = builder.Build();
// 显式设置监听地址为0.0.0.0
app.Run("http://0.0.0.0:8080");

（3）优化CORS配置顺序

CORS中间件需放在正确位置，确保路由匹配后生效：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp",
        policyBuilder => policyBuilder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
});

var app = builder.Build();

// ...其他中间件
app.UseHttpsRedirection();
app.UseRouting();
app.UseCors("AllowReactApp"); // 放在UseRouting之后，MapControllers之前
app.MapControllers();
// ...

（4）可选：使用Docker内部网络+本地代理（更稳定）

若想摆脱对localhost端口映射的依赖，可让React应用通过Docker内部网络访问后端，同时配置本地代理避免DNS解析问题：

修改react-app的环境变量：

react-app:
  # ...其他配置
  environment:
    - VITE_API_BASE_URL=/api

在Vite配置文件vite.config.ts中添加代理：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://server:8080',
        changeOrigin: true,
      },
    },
  },
})

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