重写 Angular 和 ASP.NET MVC 的规则答案

【问题标题】：Rewrite rules for angular and ASP.NET MVC重写 Angular 和 ASP.NET MVC 的规则
【发布时间】：2016-10-18 17:03:08
【问题描述】：

我正在关注这篇文章（关于使用 URL 重写的底部部分）。我的 IIS Express（从 VS 启动）配置文件似乎位于 C:\Users[usernamehere]\documents\IISexpress\applicationhost.config。

我将重写规则放在<system.webServer> 标记中，就像那篇文章（以及我读过的许多其他文章）所说的那样。所以它看起来像：

<system.webServer>

        <rewrite>
        <rules>
            <rule name="angularjs routes"
                    stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" 
                        matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" 
                        matchType="IsDirectory" negate="true" />
                    <add input="{REQUEST_URI}" 
                        pattern="^/(api)" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
        </rewrite>

... all the other crap that was already there
</system.webServer>

在我的 VS 项目中，我将 index.htm 放在根目录下，并将我的测试视图放在 Views 文件夹下。这是 index.htm，当我单击链接时它可以正常工作。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<head>
    <base href="/">
    <title></title>
    <meta charset="utf-8" />
</head>
<body ng-app="myApp">
    <p><a href="/">Main</a></p>

    <a href="red">Red</a>
    <a href="green">Green</a>
    <a href="blue">Blue</a>

    <!-- below is where the partial pages will replace -->
    <div ng-view></div>

    <script>
    var app = angular.module("myApp", ["ngRoute"]);

    app.config(function($routeProvider, $locationProvider) {
        $routeProvider
        .when("/red", {
            templateUrl: "Views/red.htm",
            controller: "redController"
        })
        .when("/green", {
            templateUrl: "Views/green.htm",
            controller: "greenController"
        })
        .when("/blue", {
            templateUrl: "Views/blue.htm",
            controller: "blueController"
        });

        $locationProvider.html5Mode(true);
    });

    app.controller("redController", function($scope){
        //alert("Red");
    });

    app.controller("blueController", function ($scope) {
        //alert("Blue");
    });

    app.controller("greenController", function ($scope) {
        //alert("Green");
    });
    </script>
</body>
</html>

当我尝试输入其中一个页面方向时出现问题：即。 http://localhost:60553/red

我得到一个 404。这告诉我重写规则没有被击中并且正在执行它的工作。为什么即使使用该重写规则我也会得到 404？

【问题讨论】：

标签： asp.net angularjs asp.net-mvc iis-express

【解决方案1】：

我猜这是因为您的 Views 文件夹有一个 web.config 明确阻止对它的请求。出于安全原因，默认情况下将其放置在 MVC 项目中。

注意Views/Web.Config中的以下代码

  <system.webServer>
    <handlers>
      <remove name="BlockViewHandler"/>
      <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    </handlers>
  </system.webServer>

如果你把它注释掉，你的代码应该可以工作。

但是，我建议将您的角度视图移动到一个不同的文件夹，该文件夹不是 MVC 的事实上的保留文件夹。更改为ngView 之类的代码，此代码将起作用。这样会更干净、更清晰，而且您不会冒将剃刀代码暴露给窥探用户的风险。

更新以上不是问题，每个 cmets。问题是没有从提到的文件中使用重写规则。如果可能，将它们移至 web.config - 这将避免设置适用于所有 iis express 应用程序的全局规则。

【讨论】：

没看到。我创建了一个空白的 Web 项目，所以没有设置 MVC 的东西。这就是我的处理程序部分在 web.config 中的样子。 " type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/>
另外，我可以在地址栏中输入 mysite.com/Views/red.htm 并返回页面。显然它没有任何角度，所以你可以看到所有的括号等，但它允许我去那里，所以没有权限问题。
听起来不像是重写问题。如果重写是问题，如果手动浏览，您将无法访问该 url。
您在 javascript 中获得了 404，对吗？还是直接在浏览器中？
如果我在浏览器中输入 url 方向就可以了。如果我使用 index.htm 中的链接，它可以正常工作。这让我相信这是一个重写问题。