重写 angular 和 ASP.NET MVC 的规则
Rewrite rules for angular and ASP.NET MVC
我正在关注这篇文章(关于使用 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,当我单击 link 时它会正常工作。
<!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?
我猜这是因为您的 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>
如果您将其注释掉,您的代码应该可以正常工作。
但是,我建议将您的 angular 视图移动到另一个文件夹,该文件夹不是 MVC 实际上保留的文件夹。更改为 ngView
之类的内容,此代码将起作用。这样会更干净、更清晰,而且您不会 运行 将您的 razor 代码暴露给窥探用户的风险。
更新
根据评论,以上不是问题。问题是没有从提到的文件中使用重写规则。如果可能,将它们移至 web.config - 这将避免设置无论如何都适用于所有 iis express 应用程序的全局规则。
我正在关注这篇文章(关于使用 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,当我单击 link 时它会正常工作。
<!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?
我猜这是因为您的 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>
如果您将其注释掉,您的代码应该可以正常工作。
但是,我建议将您的 angular 视图移动到另一个文件夹,该文件夹不是 MVC 实际上保留的文件夹。更改为 ngView
之类的内容,此代码将起作用。这样会更干净、更清晰,而且您不会 运行 将您的 razor 代码暴露给窥探用户的风险。
更新 根据评论,以上不是问题。问题是没有从提到的文件中使用重写规则。如果可能,将它们移至 web.config - 这将避免设置无论如何都适用于所有 iis express 应用程序的全局规则。