Angular 16应用与Azure上.NET API通信故障排查及修复咨询

1. 你操作中的错误 #

• 未排查API 500错误根因：仅看到500错误但未通过Azure日志定位具体问题，比如数据库连接串未更新为Azure在线数据库、环境变量缺失、.NET运行时版本不匹配、EF迁移未执行等，这些都是API部署后报错的常见诱因。
• 跨域访问未配置：本地开发依赖代理文件转发请求，但部署到Azure后，前端与API属于两个独立域名，属于跨域请求场景，你未在.NET API中配置CORS策略允许前端域名访问，导致通信失败。
• 前端配置可能未生效：修改environment.prod.ts后，可能未重新构建Angular生产包就部署，导致线上前端仍在使用旧的本地API地址。
• API部署关键配置缺失：发布API时可能未设置Azure核心应用设置，比如ASPNETCORE_ENVIRONMENT未设为Production，导致API加载错误的环境配置。

2. 最可靠的修复方案 #

第一步：修复API的500错误 #

1. 查看Azure日志定位问题：
   登录Azure门户，进入你的API App Service，依次点击「监控」→「日志流」，实时查看错误日志，获取500错误的具体堆栈信息（比如数据库连接失败、权限不足等）。
2. 修正应用设置：
   在API的App Service「配置」→「应用程序设置」中：
   • 设置ASPNETCORE_ENVIRONMENT为Production
   • 更新数据库连接字符串为Azure在线数据库的连接串（替换本地的连接信息）
3. 确保EF迁移执行：
   如果使用EF Core，发布时勾选Visual Studio发布窗口中的「应用迁移」选项；或登录Kudu控制台（https://my-app-api.scm.azurewebsites.net），执行命令：

   dotnet ef database update
   

4. 匹配.NET运行时版本：
   在API的App Service「配置」→「常规设置」中，确认.NET版本与你本地开发使用的版本一致。

第二步：配置API的CORS策略 #

在.NET API的Program.cs中添加CORS配置，允许前端域名访问：

// 添加CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularClient", policy =>
    {
        policy.WithOrigins("https://my-app-client.azurewebsites.net")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 若使用身份验证（如JWT、Cookie）需启用
    });
});

// 在路由之后、授权之前启用CORS
app.UseRouting();
app.UseCors("AllowAngularClient");
app.UseAuthorization();

配置完成后重新发布API到Azure。

第三步：确保前端配置生效 #

1. 执行Angular生产构建命令：

   ng build --prod
   

2. 使用VS Code的Azure App Service扩展，重新部署构建生成的dist/文件夹内容到前端App Service。
3. 验证配置：登录前端的Kudu控制台（https://my-app-client.scm.azurewebsites.net），查看wwwroot下的main.*.js文件，确认其中的apiUrl已更新为https://my-app-api.azurewebsites.net。

可选优化（避免跨域） #

如果想彻底避免跨域问题，可将前端打包后的文件部署到API App Service的wwwroot目录下，或者使用Azure Front Door作为统一入口，但对于免费账户，配置CORS是更直接的方案。

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