Как разместить ASP. NET API и Blazor Web Assembly, как JavaScript -SPA? - PullRequest
Новая
       38

Как разместить ASP. NET API и Blazor Web Assembly, как JavaScript -SPA?

2 голосов
/ 03 апреля 2020

Контекст:

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

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

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

enter image description here

enter image description here

Первая попытка запросить 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 ]

3 голосов
/ 03 апреля 2020

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

API и приложение на 2 разных хостах

Включить CORS в Проект API Startup класс: 

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 bazorwasm --hosted. Это создаст решение с проектом Blazor wasm и хостом.

Docs

1 голос
/ 30 апреля 2020

С последним обновлением шаблонов 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

Это создает:

  • Клиентский блейзер

  • A single Проект, который можно использовать для MVC, API и бритвенных страниц, который содержит «встроенный» IdentityServer, который можно использовать для защиты вызовов API

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

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

...