ASP.NET Core配置Angular 11路由 解决Azure部署后默认打开Swagger问题

核心原因 #

• 你当前代码中将SwaggerUI的RoutePrefix设置为了空字符串，导致站点根路径直接被Swagger页面占用，优先级高于前端静态文件
• 中间件顺序错误，重复注册了UseDefaultFiles和UseStaticFiles，且静态文件中间件的位置不符合执行优先级要求
• 没有配置Angular路由的回退规则，后续访问前端子路由刷新时会出现404问题

修改后的Configure代码 #

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseCors(options =>
       options.WithOrigins("http://localhost:4200")
       .AllowAnyMethod()
       .AllowAnyHeader());

    // 优先注册默认文件和静态文件中间件，匹配前端静态资源
    app.UseDefaultFiles();
    app.UseStaticFiles();

    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "CameraApp v1");
        // 给Swagger指定独立路由前缀，不再占用根路径
        c.RoutePrefix = "swagger";
    });

    app.UseRouting();
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        // 配置Angular路由回退，所有非API、非静态资源请求返回入口文件
        endpoints.MapFallbackToFile("index.html");
    });
}

配置说明 #

• Swagger路由调整：修改后Swagger接口文档的访问路径为/swagger，不再占用根路径，需要调试接口时手动访问该路径即可
• 中间件顺序优化：删除了重复注册的UseDefaultFiles和UseStaticFiles，确保静态文件中间件在Swagger之前执行，优先匹配Angular的入口文件index.html
• 路由回退配置：新增MapFallbackToFile("index.html")规则，所有不符合API路由、静态资源路径的请求都会返回Angular入口文件，解决前端路由刷新404的问题
• CORS配置优化：如果生产环境Angular和API部署在同一个域名下，可以删除针对http://localhost:4200的CORS配置，或者补充生产环境的前端域名到允许访问列表

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