MVC 和 AngularJS 路由 - 403.14 - 禁止

Question

我在让我的 Angular 路由之一在我的应用程序中工作时遇到问题。基本上我有一个 MVC 应用程序，它也使用了几个 SPA。

MVC路由如下；

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

            // Angular reporting routes...
            routes.MapRoute(
                name: "Reporting",
                url: "Report/{*.}",
                defaults: new { controller = "Report", action = "RptIndex", id = UrlParameter.Optional }
            );

            routes.MapRoute(
                name: "Charts",
                url: "Chart/{*.}",
                defaults: new { controller = "Chart", action = "ChtIndex", id = UrlParameter.Optional }
            );

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

            routes.AppendTrailingSlash = true;
        }
    }
}

Angular 路线是；

var ImrApp = angular.module('ImrApp', ['ngRoute', 'ui.bootstrap', 'kendo.directives']);

ImrApp.config(
	["$routeProvider", "$locationProvider", "$sceProvider",
	function ($routeProvider, $locationProvider, $sceProvider) {
		$routeProvider
			.when("/Report", { templateUrl: "/App/ReportForm/rfTemplate.html", controller: "rfController" })
			.when("/Chart", { templateUrl: "/App/Charts/chtTemplate.html", controller: "chtController" })
			.otherwise({ redirectTo: "/Report" });

		// Refer to https://docs.angularjs.org/error/$location/nobase for information regarding the "requireBase" parameter.
		// Without this option the error "$location in HTML5 mode requires a <base> tag to be present" is thrown.
		$locationProvider.html5Mode({
			enabled: true,
			requireBase: false
		});
	}]);

共享布局页面使用如下来显示导航标题；

<div class="navbar-collapse collapse">
    <img class="navbar-right" height="100" src="Images/APLNG_143x143.jpg" />

    <ul class="nav navbar-nav">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("Reporting", "RptIndex", "Report")</li>
        <li>@Html.ActionLink("Charts", "ChtIndex", "Chart")</li>
    </ul>
</div>

如果我在加载页面时将鼠标悬停在“报告”导航项上，则会显示http://localhost:xxxx/Report/，如果我将鼠标悬停在“图表”选项上，则会显示http://localhost:xxxx/Chart/。如果我选择“图表”选项，页面会按预期显示，但是如果我选择“报告”选项，我会收到 HTTP Error 403.14 - Forbidden 错误。

此外，如果我通过输入http://localhost:60739/Report/RptIndex 手动导航到“报告”页面，然后刷新页面，地址将更改为http://localhost:60739/Report/，并显示 403.14 错误。但是，刷新“图表”页面不会在地址末尾附加最后一个“/”字符并正确显示页面。

为了进一步混淆问题，我将“html5Mode enabled”设置为false，导航仍然失败，但刷新页面现在可以工作，但显示http://localhost:60739/Report/RptIndex#/Report作为页面地址。

更令人不安的是，这一切都在某一时刻起作用，然后莫名其妙地“崩溃”了。将路由代码与早期版本进行比较表明没有任何变化。

谁能告诉我为什么“图表”路由（基本上与“报告”路由相同）有效但“报告”无效？

Answer 1

路由问题是由与 Views 文件夹中的文件夹同名的文件夹引起的。因此，即使一个文件夹位于项目文件夹的正下方，而另一个文件夹是“Views\Report”，一旦第一个文件夹被重命名，问题就会自行解决。