В решении Blazor WebAssembly о том, как разместить клиентское приложение Blazor WASM на другом порту для API сервера.

Question

У меня есть решение Blazor WebAssembly с клиентским проектом, проектом сервера и общим проектом на основе шаблона решения по умолчанию от Microsoft. Я редактирую и отлаживаю в предварительном просмотре Visual Studio 2019 с помощью Google Chrome.

. Готово, решение имеет единственный стартовый проект, который является серверным приложением. Это серверное приложение имеет ссылку на проект клиентского приложения. Вы можете настроить его на использование HTTPS, установив флажок «Включить SSL» в свойствах проекта сервера, и я сделал это.

Когда вы нажимаете на отладку, она работает отлично.

Теперь я хочу изменить чтобы все мои страницы Blazor WASM обслуживались с https://localhost: 44331 , а конечные точки контроллера API серверного приложения обслуживались с https://localhost: 44331 / api

Я хочу использовать эту дополнительную часть "/ api" URL, чтобы отделить запросы к API от простой навигации по клиентскому приложению Blazor. Поэтому, если я запрашиваю "https://localhost: 44331 / api / что-то ", я знаю, что достигну точки в своем веб-API, но если я сделаю запрос "https://localhost: 44331 / что-то"Я знаю, что попаду на определенную страницу в клиентском приложении Blazor. Я думаю, что это также будет ближе к тому, как обычная установка будет в производстве.

Надеюсь, понятно, что я пытаюсь сделать.

Казалось, что очевидное место для начала меняется параметр «URL-адрес приложения» в разделе «Отладка» в свойствах приложения сервера: «http://localhost: 52708 / api ». Проект назначает безопасный URL-адрес «https://localhost: 44331 / api ». Я оставил этот же параметр в клиентском приложении, поэтому в клиентском приложении параметр «URL-адрес приложения» в разделе «Отладка» в свойствах клиентского приложения по-прежнему «http://localhost: 52708", с проектом, которому назначен безопасный URL-адрес" https://localhost: 44331".

Это все ломает.

Сейчас" https://localhost: 44331 /"возвращает меня к ошибке 404 Not Found, а" https://localhost: 44331 / api"приводит меня к странице, которая говорит:

Загрузка ...
Произошла необработанная ошибка. Перезагрузка 10

Это было бы слишком просто! Кто-нибудь знает правильный способ получить окружающую среду, как я хочу, пожалуйста?

Answer 1

Минимальные изменения в приложении fre sh из шаблона Wasm / Hosted:

WeatherForecastController.cs

//[Route("[controller]")]
  [Route("api/[controller]")]

FetchData.razor

//forecasts = await Http.GetJsonAsync<WeatherForecast[]>("WeatherForecast");
  forecasts = await Http.GetJsonAsync<WeatherForecast[]>("api/WeatherForecast");

Answer 2

Хорошо! Я наконец-то понял, как это работает. Это не сложно, но мне потребовалось дней , чтобы получить ответ, поэтому я собираюсь опубликовать его здесь, потому что я думаю, что это было бы полезно для других людей.

Чтобы вспомнить проблему когда кто-то делает запрос:

https://yourapp.com/api/someendpoint

и «someendpoint» не может быть найден, они перенаправляются на страницу Blazor. Это поведение по умолчанию странно! Они ожидали HTTP Status Code и, вероятно, тоже объект JSON, но вместо этого они получили HTML. Может быть, они даже не используют ваше приложение. Может быть, они даже не люди (более вероятно, что они часть программного обеспечения). Как вы отправляете им код состояния HTTP, если их запрос «api / someendpoint», но продолжаете отправлять им страницу Blazor, когда их запрос «someendpoint» без «api»?

Например:

На ваших контроллерах:

[Route("api/[controller]")]
public class SampleController : ControllerBase
    {
    //Etc.
    }

In Startup.cs ...

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            //Etc.
            app.UseStaticFiles();
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapControllers();
                endpoints.Map("api/{**slug}", HandleApiFallback);
                endpoints.MapFallbackToFile("{**slug}", "index.html");
            });
        }

        private Task HandleApiFallback(HttpContext context)
        {
            context.Response.StatusCode = StatusCodes.Status404NotFound;
            return Task.FromResult(0);
        }