MVC and AngularJS Routing - 403.14 - Forbidden

问题

I am having problems getting one of my Angular routes to work in my application. Basically I have an MVC application that also uses a couple of SPAs.

The MVC routing is as follows;

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;
        }
    }
}

The Angular routes are;

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
		});
	}]);

The shared layout page uses the following to display a navigation header;

<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>

If I hover the mouse over the "Reporting" navigation item when the page is loaded it displays http://localhost:xxxx/Report/ and if I hover over the "Charts" option it displays http://localhost:xxxx/Chart/. If I select the "Charts" option the page is displayed as expected however if I select the "Reporting" option I get a HTTP Error 403.14 - Forbidden error.

Additionally if I navigate to the "Reporting" page manually by entering http://localhost:60739/Report/RptIndex then refresh the page the address changes to http://localhost:60739/Report/ and the 403.14 error is displayed. Refreshing the "Charts" page however doesn't append the last "/" character on the end of the address and displays the page correctly.

To further confuse matters I set "html5Mode enabled" to false and the navigation still failed but refreshing the page now worked but displayed http://localhost:60739/Report/RptIndex#/Report as the page address.

Even more disturbing is this was all working at one point and then inexplicably "broke". Comparing the routing code to earlier versions showed there were no changes.

Can anybody give me a clue as to why the "Charts" routing (which is basically identical to the "Reporting" routing) works but "Reporting" doesn't?

回答1:

The problem with the routing was caused by a folder with the same name as a folder within the Views folder. So even though one folder was directly below the project folder and the other was "Views\Report" once the first folder was renamed the problem resolved itself.

来源：https://stackoverflow.com/questions/29021375/mvc-and-angularjs-routing-403-14-forbidden

标签

asp.net-mvc

angularjs

routing