AngularJS删除#并在刷新页面时出错

我有AngularJS webapp并使用Tomcat 7启动它.使用$locationProvider. html5Mode(true)我从url中删除散列’#’

localhost:8080/App/#/login -> localhost:8080/App/login

但是现在,当我刷新localhost：8080 / App / login时,我有 404错误.如何为localhost配置Tomcat7：8080 / App / login refresh？

的app.config：

$urlRouterProvider.otherwise("/login/");

$stateProvider
        .state('home',{
            abstract: true,templateUrl: 'dist/view/home.html',controller: 'HomeCtrl'
        });

$locationProvider.html5Mode(true);

index.html的：

<head>
    <Meta charset="utf-8">
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
</head>

这是因为当您执行完全重新加载时,您始终会使用当前URL向服务器发送请求.由于Angular尚未加载它无法处理路由,并且服务器不知道角度中存在哪些路由而不是

如果没有html5mode,Angular会使用www.example.com/#/page类型的碎片化网址. #最初用于锚链接,因此按照惯例,服务器完全忽略url的片段部分.对于上述请求的服务器与www.example.com/相同,这可能是index.html所在的位置.因此,在这种情况下重新加载页面将获得index.html,它将加载Angular,后者将依次处理url(#/ page)的片段部分.

使用html5mode但片段是隐藏的,并且网址看起来像普通网址,www.example.com / page.但是当你重新加载页面时,服务器没有得到片段,所以它试图找到在/ page下提供的任何东西,这可能没什么.给你一个404,Angular无法加载,因为index.html没有加载,你有一个破页.

解决此问题的常用方法是让服务器在所有与静态资产(或模式的模式)不匹配的URL下提供index.html.因此,如果您请求说出一个图像,它将找到它并将其返回正常,但如果您请求/页面(并且它不作为静态资产存在),则返回index.html.然后Angular将启动,读取url并触发正确的路径.

我只在Nginx中做过这个,所以我不知道Tomcat会怎么做,但原则应该是一样的.

AngularJS删除#并在刷新页面时出错

相关文章