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

Question

我在我的角度应用程序中使用Angular UI路由器,我已启用HTML5模式,通过在配置中使用$ locationProvider删除#form的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哪个引导您的角度应用程序.应用程序加载后,任何进一步的URL更改都会html5Mode考虑并通过ui-router更新您的页面.

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

您需要做的是配置您的服务器以返回所有路线的角度应用程序.我主要使用node/express,所以我做了类似的事情:

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

注意:我通常使用类似这样的东西作为最终捕获所有,但是我还在其上面包含其他路由,例如请求静态文件,网络爬虫和任何其他需要处理的特定路由.

Answer 2

您需要在服务器端设置url重写

对于apache,它将是这样的:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html

在.htaccess文件中(确保mod_rewrite启用了apache模块)

并为nginx配置如下:

location / {
    ....
    try_files $uri $uri/ /index.html =404;
}