首页 文章

如何在HTML5模式下为URL重写AngularJS应用程序配置IIS？

提问于
浏览 次
131

我有AngularJS seed project，我补充说

$locationProvider.html5Mode(true).hashPrefix('!');

到app.js文件 . 我想配置IIS 7以将所有请求路由到

http://localhost/app/index.html

这对我有用 . 我该怎么做呢？

Update:

我刚刚发现，下载并安装了IIS URL Rewrite module，希望这样可以轻松实现我的目标 .

Update 2 ：

我想这总结了我想要实现的目标（取自AngularJS Developer documentation）：

使用此模式需要在服务器端重写URL，基本上您必须重写所有链接到应用程序的入口点（例如index.html）

Update 3:

我还在努力，我意识到我不需要重定向（有重写规则）某些URL，例如

http://localhost/app/lib/angular/angular.js
http://localhost/app/partials/partial1.html

所以css，js，lib或partials目录中的任何内容都不会被重定向 . 其他所有内容都需要重定向到app / index.html

任何人都知道如何轻松实现这一点，而无需为每个文件添加规则？

Update 4:

我在IIS URL重写模块中定义了2个入站规则 . 第一条规则是：

IIS URL Rewrite Inbound Rule 1

第二条规则是：

IIS URL Rewrite Inbound Rule 2

现在，当我导航到localhost / app / view1时，它会加载页面，但是支持文件（css，js，lib和partials目录中的文件）也被重写到app / index.html页面 - 所以一切都将到来无论使用什么URL，都返回index.html页面 . 我想这意味着我的第一条规则，即应该阻止这些网址被第二条规则处理，不起作用..任何想法？ ...任何人？ ...我感觉很孤单... ：-（

iis url-rewriting angularjs

6 回答

  • 9

    在 app.js 中设置了 $locationProvider.html5Mode(true) 之后，我在web.config中写出了一条规则 .

    希望，帮助别人 .

    <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>
  </system.webServer>

    在我的index.html中，我将此添加到 <head>

    <base href="/">

    不要忘记在服务器上安装IIS URL Rewrite .

    此外，如果您使用Web API和IIS，如果您的API位于 www.yourdomain.com/api ，由于第三个输入（第三行条件），这将起作用 .

    回复于
  • 0

    问题DO工作中显示的IIS入站规则 . 我必须清除浏览器缓存并在index.html页面的 <head> 部分的顶部添加以下行：

    <base href="/myApplication/app/" />

    这是因为我在localhost中有多个应用程序，所以对其他部分的请求被带到 localhost/app/view1 而不是 localhost/myApplication/app/view1

    希望这有助于某人！

    回复于
  • 261

    在我的情况下，在设置了正确的重写规则后，我一直得到403.14 . 事实证明，我有一个与我的一个URL路由同名的目录 . 一旦我删除了IsDirectory重写规则，我的路由就能正常工作 . 是否存在删除目录否定可能导致问题的情况？在我的案例中我无法想到任何事情 . 我能想到的唯一情况是你是否可以使用你的应用程序浏览目录 .

    <rule name="fixhtml5mode" stopProcessing="true">
  <match url=".*"/>
  <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
  </conditions>
  <action type="Rewrite" url="/" />
</rule>
    回复于
  • 36

    只有这两个条件的问题：

    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

    是他们只有 {REQUEST_FILENAME} exists physically on disk才能工作 . 这意味着可能存在这样的情况：对错误命名的部分视图的请求将返回根页而不是404将导致角加载两次（并且在某些情况下它可能导致令人讨厌的无限循环） .

    因此，建议使用一些安全的“后备”规则来避免这些难以解决的问题：

    <add input="{REQUEST_FILENAME}" pattern="(.*?)\.html$" negate="true" />
  <add input="{REQUEST_FILENAME}" pattern="(.*?)\.js$" negate="true" />
  <add input="{REQUEST_FILENAME}" pattern="(.*?)\.css$" negate="true" />

    或matches any file ending的条件：

    <conditions>
  <!-- ... -->
  <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
</conditions>
    回复于
  • 1

    我发现最简单的方法就是将触发404的请求重定向到客户端 . 即使设置了 $locationProvider.html5Mode(true) ，也可以通过添加＃标签来完成此操作 .

    此技巧适用于在同一Web站点上具有更多Web应用程序并且需要URL完整性约束的环境（E.G.外部身份验证） . 这是一步一步怎么做

    index.html

    正确设置 <base> 元素

    <base href="@(Request.ApplicationPath + "/")">

    web.config

    首先将404重定向到自定义页面，例如“Home / Error”

    <system.web>
    <customErrors mode="On">
        <error statusCode="404" redirect="~/Home/Error" />
    </customErrors>
</system.web>

    家庭控制器

    在客户端路由中实现简单的 ActionResult 到"translate"输入 .

    public ActionResult Error(string aspxerrorpath) {
    return this.Redirect("~/#/" + aspxerrorpath);
}

    这是最简单的方法 .

    有可能（建议？）增强Error函数，使用一些改进的逻辑，仅当url有效时才将404重定向到客户端，并且当客户端上找不到任何内容时让404正常触发 . 假设你有这些有角度的路线

    .when("/", {
    templateUrl: "Base/Home",
    controller: "controllerHome"
})
.when("/New", {
    templateUrl: "Base/New",
    controller: "controllerNew"
})
.when("/Show/:title", {
    templateUrl: "Base/Show",
    controller: "controllerShow"
})

    仅当URL以“/ New”或“/ Show /”开头时才将URL重定向到客户端是有意义的

    public ActionResult Error(string aspxerrorpath) {
    // get clientside route path
    string clientPath = aspxerrorpath.Substring(Request.ApplicationPath.Length);

    // create a set of valid clientside path
    string[] validPaths = { "/New", "/Show/" };

    // check if clientPath is valid and redirect properly
    foreach (string validPath in validPaths) {
        if (clientPath.StartsWith(validPath)) {
            return this.Redirect("~/#/" + clientPath);
        }
    }

    return new HttpNotFoundResult();
}

    这只是改进逻辑的一个例子，当然每个Web应用程序都有不同的需求

    回复于
  • 9

    我一直在尝试部署一个简单的Angular 7应用程序，Azure Web App . 一切正常，直到你刷新页面 . 这样做，向我展示了500个错误移动的内容 . 我已经在Angular文档和几个论坛上阅读过，我需要将web.config文件添加到我已部署的解决方案中，并确保重写规则回退到index.html文件 . 经过数小时的挫折和试错测试，我发现错误非常简单：在我的文件标记周围添加一个标记 .

    回复于

相关问题