在.NET Aspire中，如何阻止Docker将localhost替换为host.docker.internal？

问题根源 #

Aspire处理容器组件间引用时，GetEndpoint("http")返回的是容器内部可访问的API地址（即host.docker.internal:端口），但React应用是给主机浏览器提供服务的，浏览器需要的是主机的localhost:端口地址，这就导致了地址不匹配的问题。

解决方案 #

方案1：获取API的外部公开端点 #

因为你已经给API配置了.WithExternalHttpEndpoints()，Aspire会自动为API生成面向主机的外部端点，直接获取这个地址即可：

var builder = DistributedApplication.CreateBuilder(args);
var frontendPath = Environment.GetEnvironmentVariable("FRONTENDPATH");
var webApi = builder.AddProject<Projects.WebApi>("WebApi")
   .WithExternalHttpEndpoints()
   .WithReference(sqlDatabase)
   .WaitFor(sqlDatabase)
   .WaitFor(migrations);

var frontend = builder.AddDockerfile("frontend", frontendPath)
    .WithEnvironment((ecc) =>
    {
        // 优先获取API的外部公开端点， fallback到内部端点
        var apiHost = webApi.GetExternalEndpoint("http")?.ToString() 
                     ?? webApi.GetEndpoint("http").ToString();
        ecc.EnvironmentVariables.Add("PUBLIC_DISMANTLING_API_HOST", apiHost);
    })
    .WithBuildArg("NODE_ENV_FILE", "local")
    .WithReference(webApi)
    .WaitFor(webApi)
    .WithHttpEndpoint(port: 3000, targetPort: 3000)
    .WithExternalHttpEndpoints();

builder.Build().Run();

方案2：手动构造localhost地址 #

如果外部端点获取异常，可以直接通过API的端口构造主机可访问的地址：

var frontend = builder.AddDockerfile("frontend", frontendPath)
    .WithEnvironment((ecc) =>
    {
        var apiPort = webApi.GetEndpoint("http").Port;
        var apiHost = $"http://localhost:{apiPort}/";
        ecc.EnvironmentVariables.Add("PUBLIC_DISMANTLING_API_HOST", apiHost);
    })
    // 其余配置保持不变
    .WithBuildArg("NODE_ENV_FILE", "local")
    .WithReference(webApi)
    .WaitFor(webApi)
    .WithHttpEndpoint(port: 3000, targetPort: 3000)
    .WithExternalHttpEndpoints();

关键说明 #

• 保留.WithReference(webApi)是为了让Docker容器内部能正常访问API服务，不影响容器间通信。
• .WithExternalHttpEndpoints()确保API的端口在主机上是公开可访问的，浏览器才能通过localhost访问到API。

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