javascript - 使用启用了 Html5 模式的 Angular Ui Router 时，页面重新加载失败

Question

我在我的 Angular 应用程序中使用 Angular UI Router，并且我启用了 HTML5 模式，通过在配置中使用 $locationProvider 来删除 URL 中的#。

var app = angular.module('openIDC', ['ui.router']);
app.config(function($urlRouterProvider, $stateProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'views/home.html',
        controller: 'HomeController'
    })
    .state('login', {
        url: '/login', 
        templateUrl: 'views/login.html',
        controller: 'LoginController'
    })
});

我还设置了 <base href="/" /> index.html 文件中的标记也是如此。路由工作正常，我可以导航到页面并删除#，但是当我使用浏览器上的重新加载按钮刷新页面时，会出现 404 错误响应。

为什么会发生这种情况以及如何修复它并启用 HTML5 模式以获得正确的 URL

Answer 1

Kasun，发生这种情况的原因是因为您正试图从您的一个子路由刷新页面(与 ui-router 无关)。

基本上，如果您请求 www.yourdomain.com/，您的服务器可能会设置为返回 index.html，它会引导您的 Angular 应用程序。加载应用程序后，任何进一步的 url 更改都会考虑 html5Mode 并通过 ui-router 更新您的页面。

当您重新加载您的页面时， Angular 应用程序不再有效，因为它尚未加载，因此如果您尝试加载子路由(例如:www.yourdomain.com/someotherpage )，那么您的服务器不知道如何处理 /someotherpage 并且可能返回 404 或其他一些错误。

您需要做的是将服务器配置为返回所有 路由的 Angular 应用程序。我主要使用 node/express，所以我会这样做:

app.get('*', function(req, res, next) {
    // call all routes and return the index.html file here
}

注意:我通常使用类似这样的东西作为最后的包罗万象，但是我还在它上面包含其他路由，例如请求静态文件、网络爬虫和任何其他需要处理的特定路由。