仅 JS 前端的 IIS URL 重写规则问题答案

【问题标题】：Trouble with IIS URL Rewrite rules for JS-only front-end仅 JS 前端的 IIS URL 重写规则问题
【发布时间】：2016-12-08 03:49:24
【问题描述】：

我正在使用 React 和 react-router 构建一个应用程序，并将其托管在 Azure 上的 IIS 中。该应用程序从一个单独托管的 WebApi 获取数据，该 WebApi 也在 Azure 上的 IIS 中。在前端，我使用 IIS URL 重写规则将 HTTP 重定向到 HTTPS，并将任何不是物理文件的内容重定向到站点的根目录。在大多数情况下，一切都很好，但我有一个我不想重定向的“虚拟”路线。

对于新用户，我想通过电子邮件向他们发送https://www.example.com/initialLogin/encryptedtoken 的链接。为该路由配置了 React-router，它将请求代理到验证令牌的后端。如果令牌有效，前端将重定向到更改密码页面。如果成功，则用户登录并继续他们的快乐方式。

在本地使用 webpack-dev-server，此流程与描述的完全一样。在 IIS 中没有那么多。我尝试过的简单重写规则给了我一个 301，没有规则我只得到一个 404。我想这是有道理的，但我的项目的技术组合是我所追求的吗？

这是我现有规则的当前版本。我认为我得到了 404，因为 IIS 尝试首先处理请求并且准确地报告资源不存在。

<rewrite>
  <rules>
    <rule name="Redirect HTTP to HTTPS">
      <match url="(.*)" />
      <conditions>
        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
      </conditions>
      <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent"/>
    </rule>
    <rule name="Redirect non-existent paths to root">
      <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="^/initialLogin/*" ignoreCase="true" negate="true" />            
      </conditions>
      <action type="Redirect" url="/" appendQueryString="false" />
    </rule>
  </rules>
</rewrite>

【问题讨论】：

能分享一下IIS Url重写规则吗？
按要求添加规则
我希望我理解正确：您需要将“^/initialLogin/*”重写到根目录，可能是“index.html”，但完整的 URL在地址栏中没有重定向？是这样吗？
实际上，我认为更准确的说法是我希望该路由既不重写也不重定向，而是由 react-router（在浏览器中）处理。其他“虚拟”路线的行为方式也是如此，但仅在您登录并在应用程序中导航时。看来我需要找到一种方法，在将初始登录链接放入地址栏中但在提交之前下载我的应用程序脚本。
脚本下载后它会工作，因为浏览器会拦截所有导航请求。但是初始时你必须告诉浏览器它应该加载什么内容。所以我会为你的初始登录添加一个重写规则到 / 并让它处理其余的。因为你必须重写而不是重定向，所以“^/initialLogin/*”必须命中你的 react-router，但是你必须告诉 IIS 在哪里可以找到 react-router，因此例如重写到 /index.html。然后浏览器可以使用 react 来决定要做什么。如果您愿意，我可以在答案中提供示例。

标签： azure reactjs iis url-rewriting react-router

【解决方案1】：

这是我使用的重写规则

<rewrite>
  <rules>
    <rule name="initialLogin" stopProcessing="true">
      <match url="^initialLogin/*" />
      <action type="Rewrite" url="/index.html"/>
    </rule>
  </rules>
</rewrite>

你可以试试here javascript 很简单，我只是将 windows.location 写到 body 标签，但是 react-route 可以从这里获取。

【讨论】：

太棒了。我试试看