如何使用 Angular pushstate URL 抛出真正的 404 或 301

Question

我在单页应用程序 (SPA) 中使用 $routeProvider 和 $locationProvider 来处理 pushstate URLS，像这样：

angular.module('pets', [])

  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/pet/:petId', {
      controller: 'petController'
    });
  })

  .controller('petController', function($scope, petService, $routeParams){
    petService.get('/api/pets/' + $routeParams.petId).success(function(data) {
      $scope.pet = data;
    });
  });

URL 用于从服务器中提取可能存在或不存在的内容。

如果这是一个普通的多页网站，对丢失内容的请求会触发服务器的 404 header 响应，对移动内容的请求会触发 301。这会提醒 Google 到丢失或移动的内容。

比如说我打了一个 URL 这样的：

http://example.com/pet/123456

并说数据库中没有这样的宠物，我的 SPA return 怎么能在那个内容上出现 404。

做不到这一点，是否有其他方法可以正确提醒用户或搜索引擎所请求的 URL 不存在？还有其他一些我没有考虑的解决方案吗？

Answer 1

试试这个

angular.module('pets', [])

  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/pet/:petId', {
      controller: 'petController'
    }). otherwise({ yourUrl:'/404.html'}) // Render 404 view;
  })

Answer 2

真正的问题是 http://example.com/pet/123456 return 有什么吗？

如果您的起点是 http://example.com/ 并且有一个 link 到 http://example.com/pet/123456 那么 Angular 将调用 petController 进而生成一个 AJAX 呼叫 http://example.com/api/pet/123456。

爬虫不会这样做，而是会尝试直接调用 http://example.com/pet/123456。

因此您的服务器必须能够处理该调用。如果没有 ID 为 123456 的宠物，那么它应该 return 404。问题已解决。如果有那么它应该 return SPA。然后应用程序应相应地处理这种情况。

Answer 3

根据这个回答How do search engines deal with AngularJS applications?, You should use Headless Browser to process crawlers requests, and serve back snapshots of the page with the appropriate Response Code. https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot

google 示例不包括 301,302 或 404 个案例。但是，可以修改他们的代码以分析快照的内容并更改响应代码。

我发现 prerender.io 提供此服务，但不是免费的。但是，如果您的页面少于 250 页，他们有免费计划。 Prerender 要求在 404 或 301 的情况下，将元标记添加到 DOM.

<meta name="prerender-status-code" content="404">

然后他们的无头浏览器会检测到此元标记并更改响应代码。

如何使用 Angular pushstate URL 抛出真正的 404 或 301

How do I throw a real 404 or 301 with an Angular pushstate URL

angularjs

seo

http-status-code-404

pushstate

angular-routing