使用.NET Core+Angular模板部署Azure后，如何访问API及Swagger？

1. Azure Web App无法暴露自定义端口 #

Azure Web App平台仅对外暴露80/443端口，所有外部请求都会通过平台反向代理转发到你的应用进程，无法直接暴露本地SPA Proxy使用的其他端口，所以必须让API、Swagger和Angular SPA共享同一端口，通过路径区分请求。

2. 配置路由避免API/Swagger被重定向到index.html #

问题根源是ASP.NET Core SPA中间件默认会将所有未匹配到API的请求重定向到index.html，你需要调整中间件顺序和规则，让/api和/swagger开头的请求优先被API和Swagger处理，不进入SPA路由逻辑。

修改Program.cs的中间件配置 #

按以下顺序配置中间件（关键是API和Swagger的端点要在SPA中间件之前注册）：

var builder = WebApplication.CreateBuilder(args);

// 添加服务，包括控制器、Swagger等
builder.Services.AddControllersWithViews();
builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new() { Title = "MyAPI", Version = "v1" });
});

var app = builder.Build();

// 按需启用Swagger，这里允许生产环境访问
if (app.Environment.IsDevelopment() || app.Environment.IsProduction())
{
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");
        // 设置Swagger的访问路径为/swagger，直接通过域名+/swagger访问
        c.RoutePrefix = "swagger";
    });
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

// 映射API控制器路由
app.MapControllers();

// 最后配置SPA中间件，仅处理非API/Swagger的请求
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

app.Run();

额外验证点 #

• 确保所有API控制器都使用[Route("api/[controller]")]前缀，比如：

  [ApiController]
  [Route("api/[controller]")]
  public class WeatherForecastController : ControllerBase
  {
      // 控制器逻辑
  }
  

• 部署到Azure后，检查Web App的应用设置，确认ASPNETCORE_ENVIRONMENT是否符合你启用Swagger的条件。

3. 访问测试 #

部署修改后的代码到Azure后：

• 访问https://<your-app-name>.azurewebsites.net/swagger即可打开Swagger UI
• 访问API接口（比如https://<your-app-name>.azurewebsites.net/api/weatherforecast）会直接返回API响应，不会被重定向到index.html

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