在 AngularJS 网站上刷新 404 页面？答案

【问题标题】：Getting 404 page on refresh on AngularJS site?在 AngularJS 网站上刷新 404 页面？
【发布时间】：2013-07-28 13:32:57
【问题描述】：

每次我都会收到 404 页面：

1.)刷新我的Angularjs网站上的任何页面（除了根页面）

或

2.)点击Back从404页面转到根页面（根页面将是404） p>

这是我的.config() 代码

'use strict';

angular.module('mmApp', ['ngResponsiveImages'])
  .config(function ($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';
    $routeProvider
      .when('/', {
        templateUrl: '/views/design.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: '/views/about.html',
        controller: 'MainCtrl'
      })
      .when('/contact', {
        templateUrl: '/views/contact.html',
        controller: 'MainCtrl'
      })     
      .otherwise({
        redirectTo: '/'
      });
  });

我遇到过这个类似的问题，但不太明白答案或如何实现它们。

AngularJS - Why when changing url address $routeProvider doesn't seem to work and I get a 404 error

接受的答案是设置 Apache 以重新配置到根目录的所有路径。我的网站在 Github Pages 上。我的gh-pages 存储库中有一个.htaccess 文件，但我不知道如何配置它以将所有路径发送到根目录。

答案说要考虑的另一件事是使用<base> 元素，如<base href="/" />，但我应该把它放在哪里？在我的index.html?如果是在该文件的顶部或底部？另外，我可以将href 的值留给/ 吗？

【问题讨论】：

你设置html5mode为false有这个问题吗？
我刚刚测试了我的网站，将 html5Mode 设置为 false，就像 $locationProvider.html5Mode(false); 一样，但问题仍然存在。

标签： .htaccess angularjs github http-status-code-404 github-pages

【解决方案1】：

Github 页面只提供静态文件。它不会读取您在 .htaccess 中对 Apache 的任何配置设置。

如果你想在 Github 页面之外运行 AngularJS 应用，你不能使用html5Mode。

【讨论】：

我已将html5Mode 设置为false，但问题仍然存在。刷新除根以外的任何页面都会导致 404。我还必须对我的 config() 进行哪些其他更改才能使其正常工作？
好的，我必须等待代码更新。现在，当我单击内部站点链接时，我得到一个 404，因为我从链接路径中取出了哈希标签 #，但是当我在地址栏中的 URL 中手动输入哈希标签时，我可以正常加载页面。现在当我点击刷新时，我没有得到 404 页面。这很好，但重点是通过去掉 # 哈希标签来美化我的 URL。我在这里问了这个问题stackoverflow.com/questions/17893292/…我该怎么做？
我找到了一种解决方案，它允许人们在 Github 页面之外运行 AngularJS 应用程序。我网站上的所有页面现在都能正常刷新，并且我设置了html5Mode(true)。看我的回答。

【解决方案2】：

我在这里遇到了一个解决方案：https://coderwall.com/p/kfomwa

这是短文：

angularjs 提供了 html5Mode，它让你的应用使用基于 pushstate 的 URL 而不是 hashtags。但是，这需要服务器端支持，因为生成的 url 也需要正确呈现。

这实际上适用于 github 页面的自定义 404 页面，尽管它仅适用于启用自定义域的页面。

首先，将 index.html 中的所有内容复制到 404.html。 然后，将其添加到您的应用中：
 angular.module('app', []).config(function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
请注意，如果您使用的是 angular 1.1.5，请确保您设置了 html5Mode 才能正常工作。

按照这些建议，我能够让我的网站正常运行。现在，当我点击重新加载时，页面会正确加载。

【讨论】：

只是想说这很聪明又简单，让我笑了:)
这里有没有更好的解决方案：RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^.*$ index.html
唯一的问题是请求实际上返回的是 404 响应而不是 200，即使它看起来像一个“好”响应。这可能会导致一些意外行为，但它确实解决了您遇到的问题。
谢谢！这是我一直在寻找的解决方案。永远不会想到这一点。

【解决方案3】：

更好的选择是将任何 url 重定向到 index.html：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*$ index.html

这不会在任何页面上导致 404 响应。

【讨论】：

工作就像一个魅力。谢谢！
谢谢！！！！在搜索了很多网站后，我终于从这里得到了它。它工作正常
您能告诉我如何添加该配置吗？ git页面可以读取'.htaccess'吗？

【解决方案4】：

我正在 Vagrant 上使用 Nginx 运行我的 angularjs 应用程序。并面临类似的问题。在使用任何 url 重新加载浏览器时，它会给我一个 404 页面。

我在主 js 文件中启用了 html5mode。启用 html5Mode 后，# 字符将不再用于您的网址中。 # 符号很有用，因为它不需要服务器端配置。如果没有#，url 看起来会更好，但它也需要服务器端的更改。

以下是一些需要做的更改：

打开/etc/nginx/sites-enabled文件夹中的nginx配置文件（nginx.conf）（路径会根据你的nginx安装目录而有所不同）。
找到try_files $uri $uri/ =404;并将其替换为try_files $uri $uri/ /index.html;
保存nginx配置文件
重启nginxsudo service nginx restart

在进行上述更改后，我尝试重新加载页面。它按预期工作。

【讨论】：