AngularJS 和处理 404 错误

Question

使用 AngularJS 应用程序提供正确的 404 的最佳方式是什么？

一点背景知识：我正在构建一个 Angular 应用程序并选择使用

$locationProvider.html5Mode(true);

因为我希望 URL 看起来自然（并且与多页“传统”网络应用程序没有区别）。

在服务器端（一个简单的 Python Flask 应用程序），我有一个包罗万象的处理程序，可以将所有内容重定向到 Angular 应用程序：

@app.route('/', defaults={'path': ''})
@app.route('/<path>')
def index(path):
    return make_response(open('Ang/templates/index.html').read())

现在，我正试图弄清楚如何处理 404 错误。我见过的大多数 Angular 应用程序都执行以下操作：

.otherwise({ redirectTo: '/' })

这意味着他们无法提供正确的 404。

但是，我更愿意返回正确的 404，带有 404 状态代码（主要用于 SEO 目的）。

使用 Angular 处理 404 的最佳方法是什么？我应该不担心它并坚持一个包罗万象的事情吗？或者我应该删除所有内容并在服务器端提供正确的 404？

为清晰起见进行了编辑

Answer 1

这是一个旧线程，但我在寻找答案时遇到了它。

将此添加到您的 appRoutes.js 的末尾并创建一个 404.html 视图。

.when('/404', {
    templateUrl: 'views/404.html',
    controller: 'MainController'
})

.otherwise({ redirectTo: '/404' })

Answer 2

我认为，如果您没有为网站的真实页面提供可用的非 JavaScript 内容，那么“出于 SEO 目的”，真正的 http 404 将毫无用处。搜索索引器不太可能呈现您的 Angular 网站以进行索引。

如果您担心 SEO，您将需要某种服务器端方式来呈现您的 Angular 页面正在呈现的内容。如果你有，为无效 URL 添加 404 是问题中最简单的部分。

Answer 3

在玩了一会儿之后，以及与 Miguel 的一些讨论，我整理了一些不同的解决方案：

1. 只需使用包罗万象的方法，不必担心正确的 404。这可以使用服务器端代码进行设置（就像我的原始解决方案一样），或者更好的是，在您的网络服务器上重写 URL。
2. 为您的 Angular 应用程序保留您网站的某个部分（例如 /app）。对于本节，设置一个包罗万象的内容，不要担心正确的 404。您的其他页面将作为常规页面提供，访问任何不以 /app 开头的无效 URL 将导致正确的 404。
3. 不断确保 app.js 中的所有路由都反映在服务器端代码中（是的，这很烦人），在那里您可以让这些路由为您的 Angular 应用程序提供服务。所有其他路线将 404。

附：第二个选项是我个人最喜欢的。我已经试过了，效果很好。

Answer 4

这是处理错误的最佳方法，并且效果很好

function ($routeProvider, $locationProvider, $httpProvider) {
    var interceptor = [
        '$rootScope', '$q', function (scope, $q) {

            function success(response) {
                return response;
            }

            function error(response) {
                var status = response.status;

                if (status == 401) {
                    var deferred = $q.defer();
                    var req = {
                        config: response.config,
                        deferred: deferred
                    };
                    window.location = "/";
                }

                if (status == 404) {
                    var deferred = $q.defer();
                    var req = {
                        config: response.config,
                        deferred: deferred
                    };
                    window.location = "#/404";
                }
                // otherwise
                //return $q.reject(response);
                window.location = "#/500";
            }

            return function (promise) {
                return promise.then(success, error);
            };

        }
    ];
    $httpProvider.responseInterceptors.push(interceptor);
});

// routes
app.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/404', {
            templateUrl: '/app/html/inserts/error404.html',
            controller: 'RouteCtrl'
        })
        .when('/500', {
            templateUrl: '/app/html/inserts/error404.html',
            controller: 'RouteCtrl'
        })

        ......

   };

Answer 5

我认为您将 Flask 路由与 Angular 路由混淆了。

404 错误代码是 HTTP 协议的一部分。当服务器不知道请求的 URL 时，Web 服务器将其用作对客户端的响应。因为你在你的 Flask 服务器中放了一个包罗万象的东西，你永远不会得到 404，Flask 将为你在地址栏中键入的任何 URL 调用你的视图函数。在我看来，当用户在地址栏中输入无效的 URL 时，你不应该让 Flask 以 404 响应，这没有什么问题。 Flask 甚至允许您在返回 404 代码时发送自定义页面，因此您可以使错误页面看起来像您网站的其余部分。

在 Angular 方面，实际上没有 HTTP 事务，因为应用程序内部的所有路由都发生在客户端，而服务器甚至都不知道。这可能是您混淆的一部分，Angular 链接完全在客户端处理，即使在 html5 模式下也没有向服务器发出任何请求，因此在这种情况下没有 404 错误的概念，仅仅是因为没有服务器参与。将您发送到未知路线的 Angular 链接将落入otherwise 子句中。此处正确的做法是显示错误消息（如果用户需要了解此情况并可以对此采取措施）或只是忽略未知路线，就像 redirectTo: '/' 所做的那样。

这似乎不是你的情况，但如果除了为 Angular 应用程序提供服务之外，你的服务器还实现了一个 Angular 可以在运行时使用的 API，那么如果 Angular 向它发出异步请求，它可能会从 Flask 获得 404 API 使用了无效的 URL。但是，如果发生这种情况，您不希望向用户显示 404 错误页面，因为该请求是应用程序内部的，而不是由用户直接触发的。

我希望这有助于澄清情况！