.NET 8下Blazor WebAssembly添加Aspire后无法运行及报错问题

场景1：新建Blazor WASM勾选「Enlist in .NET Aspire Orchestration」后无运行状态 #

• 确认启动项：必须选择带AppHost后缀的Aspire编排项目作为启动项，而非单独的Blazor项目。启动后Aspire仪表板会自动打开，Blazor项目不会显示为独立服务卡片，而是会自动启动浏览器打开其页面。
• 验证AppHost配置：检查AppHost项目的Program.cs，确认存在Blazor项目的注册代码（替换为你的项目名称）：

  var builder = DistributedApplication.CreateBuilder(args);
  var blazor = builder.AddBlazorWebAssembly<Projects.YourBlazorWasmProject>("blazor-client");
  builder.Build().Run();
  

• 查看启动日志：打开Visual Studio「输出」窗口，筛选「Aspire AppHost」日志，检查是否有Blazor项目的启动记录或错误信息（如端口占用、配置缺失）。
• 版本兼容性：确保使用Visual Studio 2022 17.8+和.NET 8.0+，低版本可能存在适配问题。

场景2：现有多API+Blazor WASM解决方案添加Aspire后Blazor报错 #

正确手动添加Blazor WASM到Aspire的步骤 #

1. 在Aspire AppHost项目中，右键「添加」→「项目引用」，选择你的Blazor WASM项目。
2. 在AppHost的Program.cs中，使用Blazor专属注册方法（而非普通AddProject），并关联API服务：

   var builder = DistributedApplication.CreateBuilder(args);
   // 添加API项目
   var api = builder.AddProject<Projects.YourApiProject>("api-service");
   // 添加Blazor WASM并关联API，自动处理服务发现与跨域
   var blazor = builder.AddBlazorWebAssembly<Projects.YourBlazorWasmProject>("blazor-client")
                       .WithReference(api);
   builder.Build().Run();
   

3. 跨域配置检查：API项目需配置基础CORS策略，确保Blazor能正常调用接口：

   builder.Services.AddCors(options =>
   {
       options.AddPolicy("AllowBlazor", policy =>
       {
           policy.WithOrigins(builder.Configuration["Services:blazor-client"] ?? "https://localhost:5001")
                 .AllowAnyHeader()
                 .AllowAnyMethod();
       });
   });
   app.UseCors("AllowBlazor");
   

常见报错排查 #

• 编译报错：找不到Blazor项目引用：删除AppHost和Blazor项目的bin/obj文件夹，清理解决方案后重新生成。
• 运行时Blazor页面无法加载：查看Aspire仪表板中Blazor项目的分配URL，手动访问该URL，检查浏览器控制台是否有资源加载失败的错误。
• API调用失败：Blazor项目需通过Aspire服务发现获取API地址，而非硬编码：

  builder.Services.AddHttpClient("ApiClient", client =>
  {
      client.BaseAddress = new Uri(builder.Configuration["Services:api-service"]);
  });
  

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