使用 angular.js 路由手动刷新时仍然出现“未找到”

Posted 2023-02-27

【中文标题】使用 angular.js 路由手动刷新时仍然出现“未找到”

【英文标题】：Still getting 'Not Found' when manually refreshing with angular.js route

【发布时间】：2013-12-07 08:17:35

【问题描述】：

阅读了大量关于 Angular.js 路由的文章和 *** 问题后，我在手动刷新时仍然收到“未找到”错误。

步骤：

浏览到localhost --> 因为我的配置（如下），我被带到localhost/home。视图和一切都加载正常。 在浏览器中点击刷新 --> 浏览器显示此Not Found: the requested /home is not found on this server

这个问题大概最像Refreshing page gives "Page not found"

我的配置

// Routing configuration.
angular.module('myModule')
    .config(['$routeProvider', '$locationProvider', 
    function ($routeProvider, $locationProvider) 
        // Enable pushState in routes.
        $locationProvider.html5Mode(true);

        $routeProvider
            .when('/home', 
                templates: 
                    layout: '/views/home.html'
                ,
                title: 'Welcome!'

            )
            .when('/launchpad', 
                templates: 
                    layout: '/views/layouts/default.html',
                    content: '/views/partials/profile.html'
                ,
                title: "Launchpad"
            )
            .otherwise(
                redirectTo: '/home'
            );

    
]);

我做过的其他事情：

在我的index.html 中，我已经有<base href="/"> 升级到 Angular 1.2.1

这是我尝试过的 htaccess 规则。没有工作。

来自Refreshing page gives "Page not found"

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %REQUEST_FILENAME !-f
    RewriteCond %REQUEST_FILENAME !-d
    RewriteCond %REQUEST_URI !index
    RewriteCond %REQUEST_URI !.*\.(css|js|html|png) #Add extra extensions needed.
    RewriteRule (.*) index.html [L]
</ifModule>

来自http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %REQUEST_FILENAME !-f
    RewriteCond %REQUEST_FILENAME !-d
    RewriteRule ^(.*)       /index.html/#!/$1 
</IfModule>

【问题讨论】：

您尝试过$locationProvider.html5Mode(true).hashPrefix('!'); 和RewriteRule ^(.*)$ index\.html#!/$1 [L]（点是保留字符，所以应该转义它）？你确定mod_rewrite 有效吗？很难判断错误在哪里，所以我会检查所有内容。

是的，我后来发现hashPrefix 是工作组合的一部分（见答案）。我相信mod_rewrite 正在工作，因为我能够从中获取日志输出：（使用块<IfModule mod_rewrite> RewriteEngine On RewriteLog MY_LOG_PATH RewriteLogLevel 3 </IfModule>）。我尝试了 RewriteRule 和两个 RewriteCond（!-f 和 !-d），但它对我不起作用。

嘿，你找到解决办法了吗？？我可以在 hashbang 模式下刷新，但在 html5 模式下它仍然显示 Object not found 如果您有任何解决方案，请告诉我

【参考方案1】：

我无法发表评论，但除了使用HTML mode、base href="/"、sudo a2enmod rewrite，使用.htaccess 重写。从 Unispaw，我必须在 both 您网站的可用站点和 /etc/apache2 apache.conf

中 AllowOverride All

【参考方案2】：

对于仍然面临此错误的人，无论是否使用 SSL：

确保在 apacheconfig 中允许覆盖，例如

<Directory "/var/www/mysite/public_html">
    AllowOverride All
</Directory>

两个端口都使用 SSL

【参考方案3】：

这个 .htaccess 设置对我很有效

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /
    RewriteCond %REQUEST_FILENAME !-f
    RewriteCond %REQUEST_URI !^/$
    RewriteRule (.*) /#!/$1 [NE,L,R=301]
</IfModule>

【参考方案4】：

我不知道这是否是最佳解决方案，但我确实找到了有效的设置组合：

包括hashPrefix('!')（见下文） 在我的 index.html 中未包含 <base href="/"> 根据this post，将FallbackResource /index.html 添加到我的服务器.conf 文件中的<Directory PATH_TO_WWW_FILES> 部分。设置后，本地的mod_rewrite 设置似乎并不重要。

// Routing configuration.
angular.module('myModule')
    .config(['$routeProvider', '$locationProvider', 
    function ($routeProvider, $locationProvider) 
        // Enable pushState in routes.
        $locationProvider.html5Mode(true).hashPrefix('!');

        $routeProvider
            .when('/home', 
                templates: 
                    layout: '/views/home.html'
                ,
                title: 'Welcome!'

            )
            .when('/launchpad', 
                templates: 
                    layout: '/views/layouts/default.html',
                    content: '/views/partials/profile.html'
                ,
                title: "Launchpad"
            )
            .otherwise(
                redirectTo: '/home'
            );

    
]);