如何在.NET Core 6现有项目中注入Blazor WebAssembly

• 添加Blazor WebAssembly项目到现有解决方案
  打开你的现有解决方案，右键点击解决方案节点，选择「添加」→「新建项目」。搜索“Blazor WebAssembly App”，选中后配置项目名称和存储位置，确保它和现有项目在同一个解决方案下。如果你的现有项目是ASP.NET Core类型，可以选择「ASP.NET Core托管」选项共享宿主环境；如果API是独立部署的，选「独立」模式更灵活。

• 配置API调用的基础地址
  打开Blazor项目的Program.cs文件，注册HttpClient时指定你现有Web API的基础地址：

  builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://your-api-domain.com/") });
  

  要是选了ASP.NET Core托管模式，默认已经配置了和宿主API的关联，只需确保现有API的接口能被Blazor访问即可。

• 配置跨域（CORS）（如果Blazor和API不在同一域名/端口）
  如果你的Blazor应用和Web API运行在不同的域名或端口下，必须在API项目中配置CORS：

  1. 打开API项目的Program.cs，添加CORS策略：

     builder.Services.AddCors(options =>
     {
         options.AddPolicy("BlazorAllowed", policy =>
         {
             policy.WithOrigins("https://your-blazor-app-url") // 替换成你的Blazor应用地址
                   .AllowAnyHeader()
                   .AllowAnyMethod();
         });
     });
     

  2. 在中间件管道中启用CORS，注意要放在app.UseRouting()之后、app.UseAuthorization()之前：

     app.UseCors("BlazorAllowed");
     

• 在Blazor组件中调用Web API
  在需要调用API的Blazor组件（比如新建一个ApiCallComponent.razor）中注入HttpClient：

  @inject HttpClient Http
  

  然后编写异步调用API的逻辑，比如获取数据：

  private List<Product> products;
  
  protected override async Task OnInitializedAsync()
  {
      products = await Http.GetFromJsonAsync<List<Product>>("api/products");
  }
  

  最后在组件中渲染数据：

  @if (products == null)
  {
      <p><em>加载中...</em></p>
  }
  else
  {
      <ul>
          @foreach (var product in products)
          {
              <li>@product.Name - @product.Price</li>
          }
      </ul>
  }
  

• 测试集成效果
  右键解决方案，选择「设置启动项目」，把Web API项目和Blazor项目都设为「启动」，然后启动调试。访问Blazor组件页面，检查是否能正常加载API返回的数据。

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