Angular 18与.NET 8部署Heroku后前端连后端遇连接拒绝错误

从报错信息看，核心问题是前端的Yarp代理试图访问当前容器内的localhost:8080，但后端是独立的Heroku应用，不在同一个容器里，所以出现连接拒绝。按以下步骤排查修复：

1. 修正Yarp代理的目标地址 #

• 打开前端项目的代理配置文件（比如appsettings.json或专门的代理配置文件），把目标地址从http://localhost:8080替换成后端Heroku应用的公开域名，格式类似https://your-backend-app-name.herokuapp.com
• 确保路由规则匹配正确，比如/auth/**这类路径要转发到后端的对应接口路径

2. 验证后端的公开访问性 #

• 直接在浏览器访问后端的Swagger地址：https://your-backend-app-name.herokuapp.com/swagger，确认能正常加载（之前测试Swagger正常，这里再确认公开域名可访问）
• 检查Heroku控制台的后端应用状态，确保没有IP白名单限制或部署失败

3. 确保后端正确使用Heroku动态端口 #

• .NET后端不能硬编码端口号（比如8080），必须读取Heroku提供的PORT环境变量。在Program.cs里修改端口绑定逻辑：

  var port = Environment.GetEnvironmentVariable("PORT") ?? "8080";
  app.Run($"http://0.0.0.0:{port}");
  

• 这样后端会使用Heroku分配的动态端口，避免端口不匹配

4. 配置Angular的API调用地址 #

• 在Angular的环境配置文件（environment.prod.ts）里，把API基础地址设置为后端的公开域名，比如：

  export const environment = {
    production: true,
    apiUrl: 'https://your-backend-app-name.herokuapp.com'
  };
  

• 所有HttpClient调用都用这个apiUrl拼接接口路径，不要用localhost

5. 正确配置后端CORS策略 #

• 在.NET后端的Program.cs里，添加允许前端Heroku域名的CORS规则，不要用宽松的AllowAnyOrigin()：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowFrontend",
          policy => policy.WithOrigins("https://your-frontend-app-name.herokuapp.com")
                          .AllowAnyHeader()
                          .AllowAnyMethod());
  });
  
  app.UseCors("AllowFrontend");
  

• 确保UseCors在UseRouting和UseAuthorization之前调用

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