Docker部署Angular17+Nginx无法连接NetCore8网关服务

核心问题分析 #

你遇到的空响应+跨域错误，本质是浏览器无法访问Docker内部的gateway服务名——浏览器不在Docker网络里，解析不了这个域名；而如果前端请求localhost:5000，又会触发跨域规则，且可能本地5000端口的流量没正确路由到Docker容器。下面是针对性的解决步骤：

1. 优先用Nginx反向代理彻底规避跨域 #

这是最稳妥的方案，让前端和API请求走同一个域名，从根源消除跨域问题：

• 修改前端API配置，把请求前缀设为/api（比如Angular的environment.prod.ts里apiBaseUrl: '/api'）
• 替换Nginx的default.conf配置，添加反向代理规则：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理Angular路由刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 把/api开头的请求转发到Docker网络里的网关服务
    location /api/ {
        proxy_pass http://gateway:5000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

• Docker Compose里前端服务只需要映射80端口，不需要额外配置网络（默认bridge网络即可），前端请求/api/settings/background时，Nginx会自动转发到网关容器。

2. 若坚持直接请求网关，修正CORS与前端配置 #

如果一定要让前端直接请求网关，需要解决两个问题：

（1）确保前端请求的是可访问的网关地址

• Angular17的环境变量是构建时注入的，Docker多阶段构建时必须在构建阶段传入正确的API地址（不能只在运行时改）。比如Dockerfile里添加：

# 构建阶段
ARG API_URL=http://localhost:5000/api
RUN ng build --configuration production --apiUrl=$API_URL

• 进入前端容器，检查dist目录下的JS文件，确认请求地址是http://localhost:5000/api而不是gateway:5000（浏览器解析不了后者）。

（2）修正NetCore网关的CORS中间件顺序

UseCors必须放在UseRouting之后、UseEndpoints之前，否则CORS规则不生效：

var builder = WebApplication.CreateBuilder(args);

// 添加CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

builder.Services.AddOcelot();
var app = builder.Build();

// 关键：CORS中间件顺序要对
app.UseRouting();
app.UseCors("AllowAll"); // 必须在UseRouting之后，UseEndpoints之前
// app.UseAuthorization(); // 未配置认证可注释
app.UseEndpoints(endpoints => endpoints.MapControllers());
await app.UseOcelot();

app.Run();

3. 额外排查点 #

• 检查Docker Compose里网关的端口映射是否正确：ports: ["5000:5000"]，确保本地5000端口能直接访问网关Swagger；
• 用浏览器开发者工具查看Network标签，确认OPTIONS请求的响应头是否包含Access-Control-Allow-Origin: *，如果OPTIONS请求返回404，说明Ocelot未正确处理OPTIONS方法，需在Ocelot配置里添加允许OPTIONS的路由规则。

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