AngularJS和处理404错误

Question

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

一点背景:我正在构建一个Angular应用程序,并选择使用

$locationProvider.html5Mode(true);

因为我希望网址显得自然(并且与多页"传统"网络应用无法区分).

在服务器端(一个简单的Python Flask应用程序),我有一个全能的处理程序,可以将所有内容重定向到角度应用程序:

@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状态代码(主要用于搜索引擎优化目的).

使用Angular处理404s的最佳方法是什么？我不应该担心它并坚持一个全能的？或者我应该删除catch-all并在服务器端提供正确的404？

编辑清楚

Answer 1

我认为你正在将Flask路线与Angular路线混淆.

404错误代码是HTTP协议的一部分.当服务器不知道请求的URL时,Web服务器将其用作对客户端的响应.因为你在Flask服务器中放置了一个全能型,所以你永远不会获得404,Flask会为你在地址栏中输入的任何URL调用你的视图功能.在我看来,当用户在地址栏中输入无效的URL时,你不应该有一个全能,只是让Flask回复404,没有任何问题.Flask甚至允许您在返回404代码时发送自定义页面,因此您可以使错误页面看起来像您网站的其余部分.

在Angular方面,实际上没有HTTP事务,因为应用程序内部的所有路由都发生在客户端,而服务器甚至不知道.这可能是您混淆的一部分,Angular链接完全在客户端处理,即使在html5mode中也没有向服务器发出任何请求,因此在此上下文中没有404错误的概念,因为没有服务器参与.将您发送到未知路由的Angular链接将属于该otherwise子句.在这里做的正确的事情是要么显示错误消息(如果用户需要知道这个条件并且可以对此做些什么)或者只是忽略未知路由,就像这样redirectTo: '/'做.

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

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

Answer 2

在玩了一下之后,以及与Miguel的一些讨论,我编写了一些不同的解决方案:

1. 只需使用全能,不要担心正确的404.这可以使用服务器端代码(就像在我的原始解决方案中一样)设置,或者更好,在Web服务器上重写URL.
2. 为您的角度应用预留网站的某个部分(例如/app).对于本节,设置一个全能,不要担心正确的404.您的其他页面将作为常规页面提供,访问任何无法启动的无效URL /app将导致正确的404.
3. 不断确保app.js中的所有路由都在您的服务器端代码中镜像(是的,非常烦人),您可以在这些路由中为您的角度应用程序提供服务.所有其他路线将是404.

PS第二个选项是我个人的最爱.我已经尝试过了,它运作得很好.