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

【问题标题】：How can I host ASP.NET API and Blazor Web Assembly like an JavaScript-SPA?如何像 JavaScript-SPA 一样托管 ASP.NET API 和 Blazor Web 程序集？
【发布时间】：2020-07-15 14:56:36
【问题描述】：

上下文：

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

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

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

第一次尝试通过我们FetchData-component 中的 Blazor 的 HttpClient 类请求 API：

@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 框架一样托管这两个项目？

【问题讨论】：

标签： asp.net-core asp.net-web-api single-page-application blazor asp.net-blazor

【解决方案1】：

您也可以，具体取决于您希望如何托管和部署您的解决方案：

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

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

Docs

【讨论】：

当我想要一个带有 ASP.NET Core API 的 RESTful 服务器 API 时，为什么建议使用 Blazor-Server？
它不是 Blazor 服务器，它是您的 Blazor wasm 应用程序的服务器。
正是我在MyStartup 中为theidserver.herokuapp.com 所做的事情
安装 SDK 3.1.300，其中应包含 blazorwasm 模板 docs.microsoft.com/en-us/aspnet/core/blazor/…
“多合一主机”正是我想要的。谢谢！

【解决方案2】：

随着模板的最新更新dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5

您可以通过运行以下命令，使用 ASP.NET Core Identity 和 IdentityServer 创建带有身份验证的 Blazor WebAssembly 应用设置：

dotnet new blazorwasm --hosted --auth Individual -o BlazorAppWithAuth1

这会创建：

客户端 Blazor
一个单一项目，可用于 MVC、API 和 razor 页面，其中包含可用于保护 API 调用的“内联”身份服务器
李>

我被困在如何将 IS4 与 APi 放在同一个项目中（这是一个小项目，独立托管的 IDP 将是矫枉过正，我只想部署一个东西），但这个模板显示了如何。

来源：https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-2-release-now-available/

【讨论】：