ASP.net OWIN AngularJS html5mode url 重定向答案

【问题标题】：ASP.net OWIN AngularJS html5mode url redirectingASP.net OWIN AngularJS html5mode url 重定向
【发布时间】：2015-09-03 23:42:35
【问题描述】：

我正在尝试使用 Web API RESTful 后端设置单页应用程序。我使用“OWIN WebAPI SPA 模板”来启动我的项目。此模板默认将静态文件提供给解决方案根目录中的 public/ 文件夹。我想支持html5 url，IE。 localhost/madeUpPath 应该点击 index.html 页面。为此，我在 Web.config 文件中设置了一个重写规则：

<system.webServer>
  <rewrite>
      <rules>
          <rule name="Main Rule" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_URI}" pattern="api/" ignoreCase="true" negate="true" />

                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="/" />
          </rule>
      </rules>
  </rewrite>
</system.webServer>

我遇到的问题是，由于静态文件位于 /public/ 中，{REQUEST_FILENAME} 认为该文件是相对于 / 并且 url localhost/main.css 被重写为 localhost/

我已尝试将规则更改为：

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

但这没有用。我怎样才能达到我想要的结果？谢谢。

编辑：我发现了一些似乎有效的东西，但并不是我想要的。

<rewrite>
    <rules>
        <rule name="Main Rule" stopProcessing="true">
            <match url="([a-zA-Z0-9-_.\/]+\.(css|js|less|json|jpeg|jpg|png|gif|svg|xml|html))$" />
            <action type="Rewrite" url="/public/{R:0}" />
        </rule>
        <rule name="Second Rule" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
        </rule>
    </rules>
</rewrite>

【问题讨论】：

标签： asp.net angularjs web-config rewrite owin

【解决方案1】：

首先，此代码不是因为您使用 OWIN 服务器处理静态文件：

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

请您使用下一个代码：

<rewrite>
    <rules>
        <rule name="Main Rule" stopProcessing="true">
            <match url="^((?!(api|\.)).)*$" />
            <action type="Rewrite" url="/" />
        </rule>
    </rules>
</rewrite>

正则表达式使我们能够忽略 api 和任何文件路径。

【讨论】：

您能解释一下为什么使用owin 时检查物理文件或目录的重写规则不起作用吗？我查看了跟踪日志文件，并从请求中删除了 FileSystem 路径。例如，如果我有一个 main.js 文件位于 c:\TestApp\public\main.js 并且 c:\TestApp 是我的项目的根目录，并且我将 FileSystem 属性设置为 new PhysicalFileSystem("./public" ) 然后我转到localhost:1337/main.js 然后 IIS 认为物理文件位于 c:\TestApp\main.js 这有什么意义？！
就您的第二点而言，这不是这里的目标。忽略 api 路径的重写规则可以正常工作。问题是，当使用启用了 angular 和 html5mode 的 owin 时，我必须使用重写规则或中间件将所有非文件和非目录请求重定向回 index.html。我用谷歌搜索的所有内容都告诉我使用我提供的重写规则，但由于我之前评论中的原因，它根本不适用于 Owin。
不管使用 Owin，我自己的观察是仍然使用了 URL 重写模块。 Owin 只是将自己插入到管道中，我怀疑 URL 重写模块在到达 Owin 之前在管道中较早发生。无论 IIS、Owin 和 URL Rewrite 的确切内部结构如何，我们都可以根据我的回答与 Owin 和 URL Rewrite 配置完美配合。
这个答案需要更多的支持。这是迄今为止在核心应用程序的 wwwroot 文件夹中提供 SPA 的最佳答案。尝试并成功了其他选项，但没有为您的 Angular 应用程序提供 base-href，只有此选项通过忽略 API 路径并将所有其他请求返回到根目录来工作。谢谢！

【解决方案2】：

我们还使用 Owin 从子文件夹中提供内容，以下内容非常适合我们：

<rewrite>
  <rules>
    <rule name="Angular Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{APPL_PHYSICAL_PATH}public{URL}" matchType="IsFile" ignoreCase="true" negate="true" />
        <add input="{APPL_PHYSICAL_PATH}public{URL}" matchType="IsDirectory" ignoreCase="true" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

它与this comment 非常相似，但我将它们的{REQUEST_URI} 变量更改为{URL}，这样即使它们有查询字符串，它也会忽略现有文件，这是缓存破坏资源所必需的，例如site.css?ec99043d9af49f2bd7c2 .

编辑：我也刚刚发现this Microsoft example，经过一些调整也可能适用于这种情况，但我自己还没有测试过：

  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/MyApp/" />
      <!--<action type="Rewrite" url="/" />-->
      </rule>
    </rules>
  </rewrite>

【讨论】：