Блог

Главная - Вопросы по программированию - Маршрутизация Angular 9 и dotnet WebAPI

Маршрутизация Angular 9 и dotnet WebAPI

#angular #azure #dns #asp.net-core-webapi #azure-web-app-service

#angular #azure #dns #asp.net-core-webapi #azure-web-app-service

Вопрос:

Я создал Angular SPA с Web API (.net core 3.1), используя шаблон Visual Studio, он был развернут в службе приложений Azure. SPA отлично работает с вызовом конечных точек API.

Однако, когда я пытаюсь вызвать API, например, из мобильного клиента, api/v1/users/123 где идентификатор пользователя 123 не существует, я ожидал бы 404, но вместо этого кажется, что преобладает маршрутизация Angular, поскольку вместо этого она возвращает домашнюю страницу SPA.

Могу ли я выполнить какую-либо конфигурацию, которая разрешит эту проблему, или я делаю это неправильно?

Кроме того, я добавил два поддомена к службе приложений, один для SPA и один для API: portal.NN.com и api.NN.com . Можно ли отключить SPA, когда api.NN.com используется?

Редактировать для пояснения: WebAPI используется как SPA, так и мобильным приложением Xamarin. Проблема в моем приложении Xamarin заключается в том, что я не получаю 404, когда пытаюсь найти ресурс, который не существует, или, если маршрут не существует, он перенаправляется на домашнюю страницу SPA (можно увидеть HTML при десериализации JSON).

Правка #2 — Настройка из Startup.cs

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseMiddleware<ErrorHandlingMiddleware>();
            app.UseCors("CorsPolicy");

            if (!env.IsDevelopment())
            {
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            if (!env.IsDevelopment())
            {
                app.UseSpaStaticFiles();
            }

            app.UseRouting();

            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });

            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
                }
            });
        }

Комментарии:

1. Может быть, у вас есть запасной вариант в вашей таблице маршрутизации angular, например { path: '**', redirectTo: "starComponent" } ? Если у вас есть глобальный обработчик ошибок, для обработки примерно 404 результатов — попробуйте отображать время в виде панели закусок для мобильных устройств? Как работает эмулятор мобильной разработки по сравнению с телефонами? Это другой браузер на вашем телефоне?

2. Вам следует опубликовать еще один вопрос, посвященный вашему второму вопросу — так вы с большей вероятностью получите лучшие ответы. Что касается вашего первого вопроса, вы хотите настроить свой модуль маршрутизации для перенаправления на страницу «404», которая будет перехватывать все ссылки в вашем приложении, которые не маршрутизируются.

3. Добавлено некоторое уточнение. Спасибо за совет, @MikeS.

4. Можете ли вы опубликовать общедоступный метод настройки void (приложение IApplicationBuilder, среда IWebHostEnvironment env) из StartUp.cs?

Ответ №1:

Попробуйте использовать приложение.Используйте эту функцию.

Документация: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/middleware/?view=aspnetcore-3.1#branch-the-middleware-pipeline 

 app.UseWhen(x=> !x.Request.Path.Value.Contains("ApiEndPoint"), app1 =>
            app1.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            })
            );

Надеюсь, это поможет.