删除#！来自 ASP.Net Web API 中的 angular.js Urls答案

【问题标题】：Removing #! from angular.js Urls in ASP.Net Web API删除#！来自 ASP.Net Web API 中的 angular.js Urls
【发布时间】：2017-11-11 17:16:48
【问题描述】：

所以我试图删除 #!在我的角度网站中并过渡到 html5。我查看了其他指南，并在索引文件中使用 locationProvider 和 base 实现了它们。当您通过 ng-href 将其定向到链接时，该站点工作正常，但是当我按下刷新/直接输入 url 时，我收到 404 错误。我正在阅读这与服务器端有关，因为 .otherwise() 是一个 hashbang 函数，所以当 404 被击中时它不知道路由到哪里。

话虽如此，我查看了 WebApi 配置，发现如果要达到 404，我已经指定了一个默认 routeTemplate，如下所示。

// Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First();
        jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

任何帮助将不胜感激

【问题讨论】：

标签： javascript angularjs asp.net-web-api hashbang

【解决方案1】：

正如您正确提到的，问题出在服务器端。当您刷新浏览器时，AngularJS 路由不会启动。相反，浏览器会向服务器发出请求。服务器在所需位置找不到任何内容，因此返回 404。

您在问题中发布的当前服务器端路由仅处理对您的 Web api 的请求。

除了 web api 路由之外，您还必须添加一个 mvc 路由来传递您的起始页。

假设你的起始页是 index.html，将以下路由添加到你的服务器端路由配置中

//MVC
RouteTable.Routes.Ignore("api/{*url}"); // ignore api routes for mvc
RouteTable.Routes.MapPageRoute("NonAPIRoute", "{*url}", "~/index.html");

如果您已经有 MVC 路由（例如在 App_Start 文件夹中的类 RouteConfig 中），那么您的 RouteConfig 类应该与此类似

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

namespace WebApplication1
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("api/{*pathInfo}"); // ignore api routes 
            routes.MapPageRoute("NonAPIRoute", "{*url}", "~/index.html");
        }
    }
}

【讨论】：

所以你是说我需要在提供我的 mapHttpRoute 行之前添加这个 ignoreRoute ？ config.Routes.IgnoreRoute(routeName: "DefaultApi", routeTemplate: "api/{controller}/{id}"); // ignore api routes for mvc
MVC 路由用于响应对 text/html 请求的常规 get 请求。 Web Api 服务于数据，MVC 服务于页面。这就是您确实需要 mvc 路由的原因。另一种选择是编写一个 API 控制器，它只返回 index.html 的内容，内容类型为 text/html。或者你可以尝试在你的 iis 配置中重写 url
所以在这种情况下，这将是 asp.net mvc 以及专门用于路由情况的 webapi 的混合体。
没错。如果您的 Web 应用程序中还没有 MVC，您可以尝试按照这个问题stackoverflow.com/questions/12614072/… 中的描述重写 IIS URL 这假设您在 IIS 中托管 Web API
我创建了一个讨论，试图弄清楚如何实现这一点。将 routeConfig 文件输入 API 后，我遇到了麻烦。我认为问题在于我已将我的项目分成 3 个单独的项目前端和后端，这导致 ~/index.html 路径发生变化。我将如何解决这个问题？ chat.stackoverflow.com/rooms/146299/…

【解决方案2】：

为您的项目添加配置以启用 HTML5 模式并删除前缀

.config(['$locationProvider', function($locationProvider) {
    $locationProvider.hashPrefix(''); // by default '!'
     $locationProvider.html5Mode({
         enabled: true
     });
}]);

【讨论】：

是的，我已经这样做了。如前所述，这可以正常工作，但是当您通过输入 url 按下刷新页面/重定向时，它会给您一个 404 错误。