如何像JavaScript-SPA一样托管ASP.NET API和Blazor Web程序集? [英] How can I host ASP.NET API and Blazor Web Assembly like an JavaScript-SPA?

问题描述

上下文:

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

We want to create a Single Page Application that runs with Blazor WebAssembly on the client-side. On the server-side, the solution has an ASP.NET MVC which includes some ApiController classes for our REST APIs.

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

We want to use ASP.NET API on the server-side instead of Blazor Server because we want to provide a REST interface with ApiController classes for unknown consumers.

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

Here is my client-side (Blazor WebAssembly) and server-side (ASP.NET API) project in a single solution:

首先尝试通过Blazor的FetchData -component中的HttpClient-class请求API:

A first try to request the API via Blazor´s HttpClient-class in our FetchData-component:

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

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

在服务器端，API控制器如下所示:

On server-side the API-Controller looks like:

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

Problem: In my Blazor WebAssembly Project the request to the API fails. The Blazor WebAssembly Project is hosted via https://localhost:44340/ and the API is hosted via https://localhost:44349/. How can I host both projects together as I would it do with a JavaScript Framework?

推荐答案

您可以选择哪种方式，具体取决于您托管和部署解决方案的方式:

You can either, depending on how you want to host and deploy your solution :

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服务器

• add a package reference to Microsoft.AspNetCore.Components.WebAssembly.Server
• Setup the blazor server in your Startup class

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

您可以使用:dotnet new blazorwasm --hosted创建示例解决方案.它将使用Blazor wasm项目和主机来创建解决方案.

You can create a sample solution with : dotnet new blazorwasm --hosted. It'll create a solution with a Blazor wasm project and a host.

文档

这篇关于如何像JavaScript-SPA一样托管ASP.NET API和Blazor Web程序集?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！