Как я могу разместить ASP.NET API и веб-сборку Blazor как JavaScript-SPA?

Контекст:

Мы хотим создать одностраничное приложение, работающее с Blazor WebAssembly на стороне клиента. На стороне сервера решение имеет ASP.NET MVC, который включает некоторые классы ApiController для наших REST API.

Мы хотим использовать ASP.NET API на стороне сервера вместо Blazor Server, потому что мы хотим предоставить интерфейс REST с классами ApiController для неизвестных потребителей.

Вот мой клиентский (Blazor WebAssembly) и серверный (ASP.NET API) проект в одном решении:

введите описание изображения здесь

введите описание изображения здесь

Первая попытка запросить API через HttpClient-класс Blazor в нашем FetchData-компоненте:

@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 Framework?




Ответы (2)


Вы можете либо, в зависимости от того, как вы хотите разместить и развернуть свое решение:

API и приложение на двух разных хостах

Включить CORS при запуске проекта API класс :

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

Все в одном хосте

В вашем проекте API

  • добавить ссылку на пакет в Microsoft.AspNetCore.Components.WebAssembly.Server
  • Настройте сервер Blazor в своем Startup классе
public void Configure(IApplicationBuilder app)
{
    app.UseBlazorFrameworkFiles();
    ...
    app.UseEndpoints(endpoints => 
   {
       endpoints.MapDefaultControllerRoute();
       endpoints.MapFallbackToFile("index.html");
   });
}

Вы можете создать образец решения с помощью: dotnet new blazorwasm --hosted. Он создаст решение с проектом Blazor wasm и хостом.

Документы

person agua from mars    schedule 03.04.2020
comment
Почему вы предлагаете Blazor-Server, если я хочу иметь RESTful Server API с ASP.NET Core API? - person Simon; 03.04.2020
comment
это не сервер Blazor, это сервер для вашего приложения Blazor wasm. - person agua from mars; 03.04.2020
comment
Именно то, что я делаю в MyStartup для theidserver.herokuapp.com - person agua from mars; 03.04.2020
comment
Когда я выполняю предложенный вами cmd 'dotnet new bazorwasm --hosted', я получаю следующую ошибку: «Ни один из шаблонов не соответствует имени входного шаблона: bazorwasm». - person Simon; 27.05.2020
comment
установите SDK 3.1.300, который должен включать шаблон blazorwasm docs.microsoft.com/en-us/aspnet/core/blazor/ - person agua from mars; 27.05.2020
comment
Хостинг «все в одном» был именно тем, что я искал. Спасибо! - person Kyanite; 13.06.2020
comment
Спасибо, это то, что я искал. - person Pratik Ghag; 20.06.2021
comment
Все в одном хосте (или размещенная веб-сборка Blazor, как его называет Microsoft) можно создать, установив флажок размещенного при создании проекта (MS doc). Это устанавливает проект веб-сборки Blazor, Api и общей библиотеки классов, размещенных из одного места. Идеально. - person H. de Jonge; 23.06.2021

С последним обновлением шаблонов dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5

Вы можете создать приложение Blazor WebAssembly с аутентификацией с помощью ASP.NET Core Identity и IdentityServer, выполнив следующую команду:

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

Это создает:

  • Клиентская сторона Blazor

  • одиночный проект, который можно использовать для страниц MVC, API и razor, содержащий "встроенный" IdentityServer, который можно использовать для защиты вызовов API.

Я застрял в том, как включить IS4 в тот же проект, что и APi (это небольшой проект, и независимый IDP был бы излишним, и я просто хочу развернуть одну вещь), но этот шаблон показывает, как это сделать.

источник: https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-2-release-now-available/

person Neil Thompson    schedule 30.04.2020