为 AngularJS HTML5Mode 配置 IIS URL 重写模块仍然无法正常工作答案

【问题标题】：Configure IIS URL Rewrite module for AngularJS HTML5Mode Still Not Working为 AngularJS HTML5Mode 配置 IIS URL 重写模块仍然无法正常工作
【发布时间】：2012-11-15 04:04:44
【问题描述】：

我搜索了一些关于配置 IIS URL 重写模块以使用 AngularJS HTML5Mode 的信息，甚至尝试了我在另一个问题上找到的信息：

How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

我已经对我的 IIS 进行了更改，如上面链接中的问题所示，并设置了基本 URL，当我访问根站点（即 http://localhost/appname/）时，该站点可以正常工作。我所有的观点和路由都可以正常工作。

但是；当我尝试在新选项卡或浏览器窗口中访问特定 URL（即 http://localhost/appname/about）时，我得到一个 404。我还缺少什么吗？？？

我正在运行安装了 URL 重写模块的 Windows 7、IIS 7。

** 我必须将协议隔开以允许接受示例 URL。

【问题讨论】：

我建议使用 Charles 或 Dev Tools 来查看从 .htaccess 返回的实际标头。它将显示服务器尝试提供的 URL。然后尝试直接点击该 URL。我的直觉是“真实”的 URL 被破坏了，或者重写的形式不正确。
我使用 Fiddler 观察我对实际链接发出的直接 URL 请求中的响应，当我点击周围时，我在响应中得到 404。当我从根目录开始单击时，我还观察了请求，发现请求是针对部分（即 localhost/app/partials/app.html）而不是 URL 中的内容（localhost/app/index.html 或只是 localhost/app/)
请求显示我在路由中的 templateUrl 中的路径，而不是使用路径值。
我遇到了类似的问题，在这里解决了stackoverflow.com/a/24921686/965935
在这个[问题][1] [1]上查看我的答案和其他答案：stackoverflow.com/questions/12614072/…

标签： iis-7 url-rewriting angularjs configure

【解决方案1】：

安装此扩展：https://www.iis.net/downloads/microsoft/url-rewrite

并将其添加到 system.webServer 下的 web.config

<rewrite>
  <rules>
    <clear />        
    <rule name="Html5Mode" enabled="true" stopProcessing="true">
      <match url="^(.+)$" negate="true" />
      <conditions>
        <add input="{REQUEST_URL}" pattern="^(.+)$" negate="true" />
      </conditions>
      <action type="Rewrite" url="/index.html" logRewrittenUrl="true"/>
    </rule>
    <rule name="AngularJS" enabled="true" 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="/index.html" />
    </rule>        
  </rules>
</rewrite>

这是完整的 web.config，包括提供静态文件。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <clear />        
            <rule name="Html5Mode" enabled="true" stopProcessing="true">
              <match url="^(.+)$" negate="true" />
              <conditions>
                <add input="{REQUEST_URL}" pattern="^(.+)$" negate="true" />
              </conditions>
              <action type="Rewrite" url="/index.html" logRewrittenUrl="true"/>
            </rule>
            <rule name="AngularJS" enabled="true" 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="/index.html" />
            </rule>        
          </rules>
        </rewrite>
        <handlers>
           <clear />
            <add 
                name="StaticFile" 
                path="*" verb="*" 
                modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" 
                resourceType="Either" 
                requireAccess="Read" />
        </handlers>
        <staticContent>
            <mimeMap fileExtension=".*" mimeType="application/octet-stream" />
        </staticContent>
    </system.webServer>
</configuration>

【讨论】：