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

Question

上下文：

我们想创建一个在客户端与Blazor WebAssembly一起运行的单页应用程序。在服务器端，该解决方案具有ASP.NET MVC，其中包括一些用于REST API的ApiController类。

我们想在服务器端而不是Blazor Server上使用ASP.NET API，因为我们想为未知使用者提供带有ApiController类的REST接口。

这是我的客户端（Blazor WebAssembly）和服务器端（ASP.NET API）项目在一个解决方案中：

第一次尝试通过Blazor的FetchData-组件中的HttpClient类请求API：

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

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

在服务器端，API控制器看起来像：

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框架一样将两个项目托管在一起？

Answer 1

您可以选择，取决于您希望如何托管和部署解决方案：

API和应用程序位于2个不同的主机中

Enable CORS in the API project Startup类：

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 bazorwasm --hosted创建示例解决方案。它将使用Blazor wasm项目和主机创建一个解决方案。

Docs