刷新页面时，AngularJS路由返回404错误答案

【问题标题】：AngularJS routes returns 404 error when page is being refresh刷新页面时，AngularJS路由返回404错误
【发布时间】：2017-01-30 07:07:12
【问题描述】：

我是 angularJS 的新手，我喜欢用它编码。我目前正在使用 angularJS 构建一个 Web 门户，我的每个页面都使用 ngRoute。它对我来说很好，但是当我尝试刷新页面时，它会返回一个404 error / page not found。在这个问题上我应该怎么做？这是我的代码：

var app = angular.module("CVSRRC", ['ngMaterial','ngRoute']);

app.controller('CVSRRC-CTRL', function($scope, $http, ...){
    // some codes here...
});

app.config(function($routeProvider, $locationProvider){
    $locationProvider.html5Mode(true).hashPrefix('!');

    $routeProvider
    .when('/', {
        templateUrl: '_pages/home',
        controller: 'homeCTRL',
        resolve: {
           delay: function($q, $timeout){
                var delay = $q.defer();
                $timeout(delay.resolve, 1000);
                return delay.promise;
           }
        }  
    })
    ...etc...
    .otherwise({
         redirectTo: '/'
    });
});

在我的 HTML

<html>
   <head>
       <base href="/cvsrrc/" />
   </head>
   <body ng-app="CVSRRC" ng-controller="CVSRRC-CTRL">

      <div class="row" id="main">
        <div ng-view ng-show="statechange"></div>
        <div ng-show="!statechange" cvsrrc-resolve>
            <div id="_loader_"></div>
        </div>
    </div>

   <a href="about-us">About</a>
   <a href="login">login</a>
   //etc
   </body>
 </html>

这是我的 .htaccess 看起来像

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
ErrorDocument 404 http://localhost/cvsrrc/page-not-found

【问题讨论】：

标签： javascript angularjs angularjs-routing html5mode

【解决方案1】：

由于您使用了<base href="/cvsrrc/" /> 和$locationProvider.html5Mode(true).hashPrefix('!');，您的网址已删除#！从 url 并添加 cvsrrc/.因此，如果您从应用重定向应用，它将起作用。

但是当您重新加载页面时，它会尝试使用带有 cvsrrc/ 的 url 来查找实际不存在的路径。

所以你必须在你的服务器上使用 rewrite 模块来告诉重定向 cvsrrc/ 到 #!/

【讨论】：

所以我会将它配置到我的 .htaccess 你的意思是？ @Ankur Akvaliya 爵士
是的。取决于后端。我猜你正在使用 php。
您可以查看此内容 -stackoverflow.com/questions/38291535/page-refresh-gives-404 您可以通过此内容了解更多有趣的内容，以了解有关 angularjs 中的 html5 模式以及每个不同环境所需的配置github.com/angular-ui/ui-router/wiki/… 这个问题也可能对您有所帮助$location / html5 和 hashbang 模式切换 / 链接重写
谢谢！我会检查一下。但是请稍等，因为我会向你们提出更多问题。呵呵。如果可以的话
顺便说一句，我使用的是 php，我有一个 .htaccess 文件。我认为它应该在我的 .htaccess 上进行配置

【解决方案2】：

试试：

从您的路线中删除解析。
在配置后添加以下代码：

$locationProvider.hashPrefix("");
分享您用于访问页面的网址。
删除你的基地中的结尾“/”。

【讨论】：

【解决方案3】：

最后我找到了一个解决方案，我之前已经遇到过这个解决方案，但是它对我不起作用，因为我忘记从.htaccess 中删除/localhost/！这里是：

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d

    RewriteRule ^ - [L]

    RewriteRule (.*) /cvsrrc/index.php [L]
</IfModule>

【讨论】：