Visual Studio 2022 ASP.NET6+Angular13项目wwwroot文件无法输出访问

VS2022 自带的 ASP.NET 6 + Angular 13 项目模板默认集成了SPA开发代理，开发环境下所有没匹配到后端接口的请求，会被全量转发到 Angular 本地开发服务（即ng serve启动的前端服务），请求根本到不了ASP.NET Core自带的静态文件处理中间件，wwwroot下的文件自然加载不出来。

之前加builder.Services.AddSpaStaticFiles()不生效是必然的：这个方法只是注册静态文件相关服务，既不解决请求被代理提前截走的问题，加上大部分人配置时会把静态文件中间件放在SPA代理后面，顺序错了完全不会触发逻辑。

至于把文件放到ClientApp/src/assets就能访问的原因也很简单：这个目录是Angular开发服务本身托管的静态资源路径，代理把请求转过去之后Angular服务能直接找到文件返回，和ASP.NET Core的wwwroot托管是完全独立的两套逻辑。

所有配置修改都在项目根目录的Program.cs中完成，不需要改Angular侧的配置。

1. 调整中间件顺序，必须保证静态文件处理逻辑在路由、SPA代理之前，正确的管道顺序代码片段如下：

   var builder = WebApplication.CreateBuilder(args);
   // 注册MVC相关服务，不需要额外调用AddSpaStaticFiles，默认静态文件根目录就是wwwroot
   builder.Services.AddControllersWithViews();
   
   var app = builder.Build();
   
   // 环境相关配置
   if (app.Environment.IsDevelopment())
   {
       app.UseDeveloperExceptionPage();
   }
   else
   {
       app.UseHsts();
   }
   
   app.UseHttpsRedirection();
   // 静态文件中间件必须放在最靠前的位置，优先处理静态资源请求
   app.UseStaticFiles();
   
   // 新增代理过滤中间件，拦截wwwroot下的静态资源请求，不转发给Angular服务
   app.Use(async (context, next) =>
   {
       var requestPath = context.Request.Path.Value ?? string.Empty;
       // 匹配根目录favicon、以及wwwroot下存在的带后缀静态文件
       if (requestPath.Equals("/favicon.ico", StringComparison.OrdinalIgnoreCase)
           || (Path.HasExtension(requestPath) 
               && File.Exists(app.Environment.WebRootFileProvider.GetFileInfo(requestPath).PhysicalPath)))
       {
           // 匹配到的请求直接走静态文件中间件返回，跳过后续SPA代理逻辑
           await next();
           return;
       }
       await next();
   });
   
   app.UseRouting();
   
   app.MapControllerRoute(
       name: "default",
       pattern: "{controller}/{action=Index}/{id?}");
   
   // 原有SPA代理配置不需要修改，保持模板默认即可
   app.UseSpa(spa =>
   {
       spa.Options.SourcePath = "ClientApp";
       if (app.Environment.IsDevelopment())
       {
           spa.UseAngularCliServer(npmScript: "start");
       }
   });
   
   app.Run();
   

2. 配置完成后重启项目即可生效，不需要额外修改csproj或者Angular配置。

• 直接访问/favicon.ico可以正常加载图标，不需要放到Angular的assets目录
• 放入wwwroot下的任意静态文件（图片、js、css等），直接通过根路径+文件名即可访问，比如wwwroot下的img/test.jpg对应访问路径/img/test.jpg
• 原有的Angular assets目录访问逻辑不受影响，两个目录的静态资源可以同时使用

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