如何像 JavaScript-SPA 一樣託管 ASP.NET API 和 Blazor Web 程序集？

語境：

我們想要創建一個在客戶端使用 Blazor WebAssembly 執行的單頁應用程序。在伺服器端，該解決方案有一個 ASP.NET MVC，其中包括一些用於我們的 REST API 的 ApiController 類。

我們希望在伺服器端使用 ASP.NET API 而不是 Blazor Server，因為我們希望為未知的消費者提供帶有 ApiController 類的 REST 介面。

這是我在單個解決方案中的客戶端（Blazor WebAssembly）和伺服器端（ASP.NET API）項目：

第一次嘗試通過我們的組件中的 Blazor 的 HttpClient 類請求 API FetchData：

@inject HttpClient Http
...
@code {
   private TodoItem[] TodoItems;

   protected override async Task OnInitializedAsync()
   {
       TodoItems = await Http.GetJsonAsync<TodoItem[]>("api/ToDo");
   }
}

在伺服器端，API-Controller 看起來像：

namespace ToDoListAPI.Controllers
{
   [Route("api/[controller]")]
   [ApiController]
   [Produces("application/json")]
   public class ToDoController : ControllerBase
   {
       [HttpGet]
       public string IGetAll() 
       {
           var lResult = new List<ToDoList.TodoItem>();

           // create dummies
           for (var i = 0; i < 10; i++)
           {
               lResult.Add(new ToDoList.TodoItem() { Title = $"Title {i}", IsDone = false });
           }

           return JsonSerializer.Serialize(lResult);
       }
   }
}

**問題：**在我的 Blazor WebAssembly 項目中，對 API 的請求失敗。Blazor WebAssembly 項目通過https://localhost:44340/託管，API 通過https://localhost:44349/託管。如何像使用 JavaScript 框架一樣託管這兩個項目？

您可以，具體取決於您希望如何託管和部署您的解決方案：

2 個不同主機中的 API 和應用程序

在 API 項目啟動類中啟用 CORS：

public void Configure(IApplicationBuilder app)
{
   ...
   app.UseCors(configure => 
   {
        // configure here your CORS rule
   }
   ...
}

多合一主機

在您的 API 項目中

• 添加包引用Microsoft.AspNetCore.Components.WebAssembly.Server
• Startup在您的班級中設置 Blazor 伺服器

public void Configure(IApplicationBuilder app)
{
   app.UseBlazorFrameworkFiles();
   ...
   app.UseEndpoints(endpoints => 
  {
      endpoints.MapDefaultControllerRoute();
      endpoints.MapFallbackToFile("index.html");
  });
}

您可以使用 : 創建範例解決方案dotnet new blazorwasm --hosted。它將使用 Blazor wasm 項目和主機創建解決方案。

文件

引用自：https://stackoverflow.com/questions/61011880