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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20145068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 17:51:38  来源:igfitidea点击:

Still getting 'Not Found' when manually refreshing with angular.js route

javascript.htaccessangularjsangular-routing

提问by Jay

After reading a ton of write-ups and stackoverflow questions on Angular.js route, I'm still getting the 'Not Found' error when I do a manual refresh.

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

Steps:

脚步:

  1. browse to localhost--> because of my configuration (below), I'm taken to localhost/home. Views and everything load fine.
  2. hit refresh in the browser --> browser displays this Not Found: the requested /home is not found on this server
  1. 浏览到localhost--> 因为我的配置(如下),我被带到localhost/home. 视图和一切加载正常。
  2. 在浏览器中点击刷新 --> 浏览器显示这个 Not Found: the requested /home is not found on this server

This question is probably most like Refreshing page gives "Page not found"

这个问题可能最像刷新页面给出“找不到页面”

My configuration

我的配置

// 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'
            });

    }
]);

Other things I have done:

我做过的其他事情:

  • In my index.html, I already have the <base href="/">
  • upgraded to angular 1.2.1
  • 在我的index.html, 我已经有了<base href="/">
  • 升级到 Angular 1.2.1

Here are the htaccess rules I have tried. None work.

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

from 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>

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

来自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/#!/ 
</IfModule>

采纳答案by Jay

I don't know if this is the optimal solution, but I did find a combination of settings that worked:

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

  • Include the hashPrefix('!')(see below)
  • Did not include <base href="/">in my index.html
  • Added FallbackResource /index.htmlto my <Directory PATH_TO_WWW_FILES>section in my server .conffile per this post. After setting this, it didn't seem to matter what the local mod_rewritesettings were.
  • 包括hashPrefix('!')(见下文)
  • 没有包含<base href="/">在我的 index.html 中
  • 根据这篇文章添加FallbackResource /index.html到我的<Directory PATH_TO_WWW_FILES>服务器.conf文件中的部分。设置后,本地设置似乎无关紧要。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'
            });

    }
]);

回答by Emir Herrera

This .htaccess setting worked well for me

这个 .htaccess 设置对我来说效果很好

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

回答by Unispaw

For people who are still facing this error, with or without SSL:

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

Make sure you Allowoverride in your apacheconfig e.g.

确保您在 apacheconfig 中允许覆盖,例如

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

for both ports is u use SSL

两个端口都使用 SSL

回答by Anderson

I couldn't comment but as well as using HTML mode, base href="/", sudo a2enmod rewrite, using .htaccessrewrite. From Unispaw, I had to AllowOverride Allin boththe sites available of your site andthe /etc/apache2 apache.conf

我无法发表评论,但也可以使用HTML mode, base href="/", sudo a2enmod rewrite,使用.htaccess重写。从Unispaw,我不得不AllowOverride All这两个可用的站点的网站,并/etc/apache2 apache.conf