在ASP.net Web API中为Angular前端设置路由

vnzz0bqm  于 2023-05-19  发布在  .NET
关注(0)|答案(2)|浏览(130)

我正在尝试设置我当前的Web API,以服务于Angular 6前端应用程序。
我的Angular项目位于Web API下的'app'目录中。
我可以导航到基本页面罚款和所有的前端路由工程罚款。
我的发展是:https://test2.localhost.com/app/
我不得不将index.html中的基本位置设置为 base href="/app/"
现在我的问题是直接导航到应用程序的子URL。例如:
https://test2.localhost.com/app/information/planets
我得到了一个404,这让我相信问题在于Web API路由。
如果我在https://test2.localhost.com/app/启动angular应用程序,我可以导航到URL,但不能从浏览器中冷启动。
我在web.config中尝试了几个重写规则,但似乎都失败了,并阻止我导航到https://test2.localhost.com/app
Web API正在IIS上运行。
在Node.Js上运行前端时,路由工作正常,我可以从冷启动导航到所有子URL。

lrl1mhuk

lrl1mhuk1#

假设你也有MVC路由,尝试在你的route.config中使用以下命令:

public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
            constraints: new
            {
                // Add all routes we need MVC to handle here
                serverRoute = new ServerRouteConstraint(url =>
                {
                    return url.PathAndQuery.StartsWith("/qbo",
                        StringComparison.InvariantCultureIgnoreCase);
                })
            });

        // This is a catch-all for when no other routes matched. Let the Angular 2+ router take care of it
        routes.MapRoute(
            name: "angular",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index" } // The view that bootstraps Angular 2+
        );
    }

下面是路由约束类:

using System;
using System.Web;
using System.Web.Routing;

namespace Web
{
public class ServerRouteConstraint : IRouteConstraint
{
    private readonly Func<Uri, bool> _predicate;

    public ServerRouteConstraint(Func<Uri, bool> predicate)
    {
        this._predicate = predicate;
    }

    public bool Match(HttpContextBase httpContext, Route route, string parameterName,
        RouteValueDictionary values, RouteDirection routeDirection)
    {
        return this._predicate(httpContext.Request.Url);
    }
}
}

我已经使用这个很长一段时间了,不知道我可能是受到了哪个博客的启发。

6jjcrrmo

6jjcrrmo2#

我想明白了,不确定这是否是最好的方法,但它的工作。
我创建了一个名为FEController(FrontEndController)的控制器。

public ActionResult Index()
{
  return File(Server.MapPath("/app/") + "index.html", "text/html");
}

然后在RouteConfig.cs中添加Map路由

routes.MapRoute(
   "Angular",
   "{app}/{*pathInfo}",
   new { controller = "FE", action = "Index", id = UrlParameter.Optional }
);

routes.MapRoute(
   name: "Default",
   url: "api/{controller}/{action}/{id}",
   defaults: new { controller = "HelpMain", action = "Index", id = UrlParameter.Optional }
);

测试并确认工作正常。

相关问题