"如何配置 IIS 以在 HTML5 模式下重寫 AngularJS 應用程序的 URL？"

Question

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

Answer 1

在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 ，這將起作用。

Answer 2

問題中顯示的 IIS 入站規則有效。 我必須清除瀏覽器緩存並在 index.html 頁面的<head>部分的頂部添加以下行：

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

這是因為我在 localhost 中有多個應用程序，因此對其他部分的請求被帶到localhost/app/view1而不是localhost/myApplication/app/view1

希望這對某人有所幫助！

Answer 3

只有這兩個條件的問題：

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

是它們僅在{REQUEST_FILENAME} 物理存在於磁盤上時才起作用。 這意味着在某些情況下，對錯誤命名的部分視圖的請求將返回根頁面而不是 404，這會導致 angular 加載兩次（並且在某些情況下可能會導致令人討厭的無限循環）。

因此，建議使用一些安全的“后備”規則來避免這些難以解決的問題：

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

或匹配任何文件結尾的條件：

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

Answer 4

就我而言，在設置正確的重寫規則后，我一直收到 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>

Answer 5

我有一個類似的問題，Angular 和 IIS 在手動刷新時拋出 404 狀態代碼，並嘗試了投票最多的解決方案，但這對我不起作用。 還嘗試了許多其他必須處理 WebDAV 和更改處理程序的解決方案，但都沒有奏效。

幸運的是我找到了這個解決方案並且它起作用了（取出了我不需要的部分）。 因此，如果上述方法都不適合您，甚至在嘗試之前，請嘗試此操作，看看是否可以解決您在 iis 問題上的角度部署問題。

將代碼片段添加到站點根目錄中的 webconfig。 根據我的理解，它從任何繼承（applicationhost.config、machine.config）中刪除了 404 狀態代碼，然后在站點級別創建了 404 狀態代碼，並作為自定義 404 頁面重定向回主頁。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom">
      <remove statusCode="404"/>
      <error statusCode="404" path="/index.html" responseMode="ExecuteURL"/>
    </httpErrors>
  </system.webServer>
</configuration>

Answer 6

我發現的最簡單的方法就是將觸發 404 的請求重定向到客戶端。 即使設置了$locationProvider.html5Mode(true)也可以通過添加主題標簽來完成此操作。

此技巧適用於在同一網站上具有更多 Web 應用程序並需要 URL 完整性約束（EG 外部身份驗證）的環境。 這是一步一步的操作方法

索引.html

正確設置<base>元素

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

網頁配置

首先將 404 重定向到自定義頁面，例如“主頁/錯誤”

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

家庭控制器

實現一個簡單的ActionResult來“翻譯”客戶端路由中的輸入。

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

這是最簡單的方法。

可以（建議？）使用一些改進的邏輯來增強錯誤功能，以便僅在 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應用程序都有不同的需求

Answer 7

我一直在嘗試將一個簡單的 Angular 7 應用程序部署到 Azure Web 應用程序。 一切正常，直到您刷新頁面為止。 這樣做，向我展示了 500 錯誤 - 移動了內容。 我已經閱讀了 Angular 文檔和一些論壇，我需要將 web.config 文件添加到我部署的解決方案中，並確保重寫規則回退到 index.html 文件。 經過數小時的挫折和反復試驗，我發現錯誤很簡單：在我的文件標記周圍添加一個標簽。

Answer 8

不幸的是，使用 .NET 框架 4.5 和 IIS 6.2 的最佳解決方案對我不起作用。 我首先按照從 Microsoft 安裝URL Rewrite 工具<\/a>的所有步驟操作，然后調整我的Web.config<\/code>文件以包含以下內容：

    <system.webServer>
    <!-- handlers etc -->
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url="(^(?!.*\.[\d\w]+$).*)" />
          <conditions logicalGrouping="MatchAny">
            <add input="{REQUEST_URI}" pattern=".*\/api\/.*" negate="true" />
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

"如何配置 IIS 以在 HTML5 模式下重寫 AngularJS 應用程序的 URL？"

問題描述

8 個解決方案

解決方案1
298 2014-10-01 22:57:40

解決方案2
39 已采納 2012-10-25 00:09:47

解決方案3
12 2015-11-25 20:13:33

解決方案4
11 2014-07-23 21:51:45

解決方案5
3 2019-12-05 14:57:03

解決方案6
1 2016-06-30 12:34:20

索引.html

網頁配置

家庭控制器

解決方案7
0 2019-02-16 20:47:35

解決方案8
0 2022-02-02 02:28:42

"如何配置 IIS 以在 HTML5 模式下重寫 AngularJS 應用程序的 URL？"

問題描述

8 個解決方案

解決方案1 298 2014-10-01 22:57:40

解決方案2 39 已采納 2012-10-25 00:09:47

解決方案3 12 2015-11-25 20:13:33

解決方案4 11 2014-07-23 21:51:45

解決方案5 3 2019-12-05 14:57:03

解決方案6 1 2016-06-30 12:34:20

索引.html

網頁配置

家庭控制器

解決方案7 0 2019-02-16 20:47:35

解決方案8 0 2022-02-02 02:28:42

解決方案1
298 2014-10-01 22:57:40

解決方案2
39 已采納 2012-10-25 00:09:47

解決方案3
12 2015-11-25 20:13:33

解決方案4
11 2014-07-23 21:51:45

解決方案5
3 2019-12-05 14:57:03

解決方案6
1 2016-06-30 12:34:20

解決方案7
0 2019-02-16 20:47:35

解決方案8
0 2022-02-02 02:28:42