在单页面应用程序中，处理错误URL（404错误）的正确方法是什么？

Question

我目前正在使用angularjs编写一个web应用程序，但我认为这个问题适用于客户端路由的任何客户端javascript框架（as angular does）。

在单页面应用程序中，处理错误URL的正确方法是什么？

看看几个主要网站，我发现如果您在https://mail.google.com/mail/以下键入任何随机URL，gmail将重定向到收件箱。这发生在服务器端（使用http 300代码）或客户端，这取决于错误的路径是否在＃字符之前或之后。另一方面，Twitter显示任何无效URL的真实HTTP 404。第三种选择是显示一个“软”404，一个纯粹的客户端错误页面。

这些解决方案似乎适用于不同的情况。 Twitter希望Twitter用户和推文链接成为真正的链接，所以人们可以共享它们，将它们发布在新闻文章等中，因此重要的是无效的链接应该被识别为这样（如果我有一个链接到推文链接我的网站，一个简单的抓取会告诉我）。另一方面，在Gmail中，你不希望共享链接到你的收件箱，我甚至不确定链接是否真的是永久性/持久性的：看起来URL更新主要服务于浏览器历史导航的目的单页应用程序。提供软错误的第三种方法可能适用于类似于gmail的情况，但是没有合理的“默认”页面。

这漫长的介绍后，这里有一些具体的问题：

• 是以往任何时候都可以接受的给予，而不是一个404错误“软”错误页面，还是应该单页应用始终重定向到一个真正的404如果一个网址无效？
• Gmail的代码可能完全没有bug，但如果确实存在导致无效链接的错误，最终重定向回收件箱，那么用户可能会比错误页面更令人困惑。对于大多数网络应用程序，这些应用程序的测试不如Gmail，最好是显示一个错误页面？
• 要为单页面应用程序实现真正的404s，似乎有必要在服务器端复制路由逻辑。有没有办法解决？
• 重定向到404时，我认为用户应该能够看到导致错误的URL，可能在URL栏中。使用html5历史api，我认为这可以通过简单地触发当前页面的重新加载（使用错误的url）以及上面提到的服务器端路由来实现。对于不支持此功能的浏览器或使用hashbang符号的浏览器来说，这似乎不可能。支持所有浏览器的最佳方式是什么？

Answer 1

TL;博士：降hashbang支持和选择PJAX喜欢的行为，如果你关心搜索引擎优化。

您是否在制作应用程序或网站？如果网站需要返回404，以免混淆谷歌。它需要一个真实的404不只是显示一个页面没有找到的消息（即200与消息“页面未找到”是非常糟糕的）。你还喜欢支持哪些浏览器？

我的意见是应该避免整个hashbang服务器端渲染（即讨厌的谷歌SEO #!黑客）。如果浏览器的URL不支持pushstate（不是哈希更改），那么使用真正的pushState或重新呈现整个页面。

现在这个重要的原因是，#!应该永远不会返回404，因为它没有任何意义和它不可能模仿服务器端，因为#!后的服务器从来没有得到什么用了运行的JavaScript。

因此，如果你真的关心搜索引擎优化，我会做类似PJAX的东西，只使用真正的pushstate进行路由，然后只是无法使用旧的web 1.0。因此，我建议你分享的链接应该是404不应该有#!（传统的#没问题，只要页面内容不会有太大变化）。

最后，404大多不是问题，而是30X即重定向响应。那是因为浏览器会自动处理重定向，所以你的Javascript AJAX调用永远不会看到一个30X（他们将得到重定向响应，而不是......即200）。要处理30X响应，您将不得不为每个请求发回一个标题，以指示重定向的URL是/是什么（即，您被重定向到的），以便您不会搞乱推送状态历史记录。

当然，如果您需要支持像Twitter一样的hashbang（and they are the ones that even killed hashbang），您可以利用Google Sitemaps和rel=nofollow来尝试缓解糟糕的SEO。