容器化React应用访问同网络ASP.NET Core API失败问题排查

核心问题总结 #

1. API容器监听范围受限：ASPNETCORE_URLS设置为https://localhost:7266，导致ASP.NET Core仅监听容器内部的localhost接口，同一Docker网络内的其他容器无法访问该服务。
2. React调用地址错误：React应用用https://localhost:7266调用API，但在Docker容器环境中，localhost指向React容器自身，而非API容器。
3. HTTPS证书配置缺失：API容器挂载了证书文件，但未配置证书路径和密码的环境变量，可能导致HTTPS服务启动失败或无法被其他容器信任。

具体修复步骤 #

1. 修正API容器的监听地址 #

修改.env文件中的ASPNETCORE_URLS，让服务监听容器的所有网络接口：

# 原配置
# ASPNETCORE_URLS=https://localhost:7266
# 修改为
ASPNETCORE_URLS=https://+:7266

这样ASP.NET Core会监听容器内所有可用IP的7266端口，确保同一Docker网络的其他容器能访问。

2. 配置HTTPS证书环境变量 #

在.env中添加证书相关配置，让ASP.NET Core正确加载证书：

ASPNETCORE_Kestrel__Certificates__Default__Path=/etc/https/certs/certificate.pfx
# 替换为你的证书密码
ASPNETCORE_Kestrel__Certificates__Default__Password=your-cert-password

3. 调整React应用的API调用地址 #

将React中的API基础地址从https://localhost:7266改为https://mediere-api:7266（即Docker Compose中API服务的名称）。示例：

// 原配置
// const API_BASE_URL = "https://localhost:7266";
// 修改为
const API_BASE_URL = "https://mediere-api:7266";

Docker Compose会自动将服务名mediere-api解析为对应容器的IP，实现容器网络内的直接通信。

4. 重启容器服务 #

修改配置后，执行命令重启所有容器：

docker-compose down
docker-compose up --build

额外优化建议 #

• 如果容器内部通信不需要HTTPS，可以简化配置：

  ASPNETCORE_URLS=http://+:7266
  

  同时将React调用地址改为http://mediere-api:7266，避免证书信任问题。
• 当前CORS配置已允许任意来源，且中间件顺序正确（UseCors在UseAuthorization之前），无需额外调整。

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