在浏览器刷新时加载特定页面。 SPA AngularJS

Question

我正在创建一个新的 Web API 和 Angular 应用程序。我想知道我们如何处理服务器端的路由。一切正常。我正在使用 ui-router 进行路由，当我刷新它给我的浏览器时。

HTTP Error 404.0 - Not Found

我想知道我们该如何处理。

ui-路由器代码

$stateProvider.state('login', {
    url: '/',
    templateUrl: templatesDirectores.wmAccount + 'login.html',
    controller: 'login-controller',
    controllerAs: 'vm'
})
    .state('register', {
    url: '/register',
    templateUrl: templatesDirectores.wmAccount + 'register.html',
    controller: 'register-controller',
    controllerAs: 'vm'
})
    .state('forgetPassword', {
    url: '/forgetpassword',
    templateUrl: templatesDirectores.wmAccount + 'forget-password.html',
    controller: 'forget-password-controller',
    controllerAs: 'vm'
})

根据配置，视图加载正常，但是当 URL 为 localhost:1235/register 时，第一次加载正常，但是当我点击刷新按钮时出现 404 错误。

Answer 1

发生这种情况是因为您在 Angular 应用程序中使用了 HTML5Mode = true。 Angular 默认使用 "hash" (/#register) 路由来处理它的路由，以确保浏览器不会从服务器执行页面重新加载。

使用HTML5Mode，您可以抑制#，但要付出代价。浏览器必须 HTML5 兼容，因为 HTML5 模式使用 HTML 推送状态 (HistoryAPI).

此外，您的服务器必须配置为处理可能存在于 Angular 但服务器上不存在的路由请求。当您直接加载页面时，无论是通过键入页面还是使用刷新，都会向服务器发送一个请求，其中包含服务器可能不知道如何处理的 URL。您的服务器应该配置为 return 您的 Index.html 页面，用于它没有明确处理的任何路由。这个配置varies per server.

鉴于您声明您正在使用 IIS 来托管您的站点，因此需要类似以下内容：

Web.config:

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main 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>
</system.webServer>

本质上，对于所有路由（.*），如果请求不是文件或目录，则将 url 重写为 return base URL /.

这也可以用代码来完成，类似这样：

Global.asax:

private const string ROOT_DOCUMENT = "/default.aspx";

protected void Application_BeginRequest( Object sender, EventArgs e )
{
    string url = Request.Url.LocalPath;
    if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )
        Context.RewritePath( ROOT_DOCUMENT );
}

这里还有一些其他注意事项：

每个平台处理重写的方式不同。在 IIS 的情况下，URL 被重写，路由的其余部分丢失。即对于 localhost:1235/register，您实际上将加载 localhost:1235/，而 Angular 将永远不会收到 /register 路由。本质上，IIS 不知道的所有路由都将 return 您的应用程序入口点。
您可以为您的应用设置多个入口点，但是从一个入口点移动到另一个入口点时，任何内存中对变量、设置等的引用都将丢失。

鉴于这两点，您应该始终将任何外部 URL 视为您的 Angular 应用程序的全新副本，并相应地处理它们.

Answer 2

这是将 404 重新路由到您的 SPA 的另一种方法：

 <system.webServer>
    <httpErrors errorMode="Custom">
      <remove statusCode="404" subStatusCode="-1"/>
      <error statusCode="404" prefixLanguageFilePath="" path="/spa-location.html" responseMode="ExecuteURL"/>
    </httpErrors>
 </system.webServer>

在浏览器刷新时加载特定页面。 SPA AngularJS

Loading the specific page on Browser Refresh. SPA AngularJS

asp.net-web-api

angularjs

single-page-application