Wie kann ich einen echten 404 oder 301 mit einer Winkelpushstate URL werfen

Question

I $ routeProvider und $ locationProvider bin mit pushstate URLS auf einer einzigen Seite app (SPA) zu handhaben, so etwas wie:

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; 
    }); 
    }); 

Die URL wird verwendet, um Inhalte vom Server abzurufen, die möglicherweise nicht vorhanden sind.

Wenn dies eine normale mehrseitige Website war, würde eine Anforderung für fehlenden Inhalt eine 404-Headerantwort vom Server auslösen und eine Anforderung für verschobenen Inhalt würde eine 301 auslösen. Dies würde Google auf den fehlenden oder verschobenen Inhalt hinweisen.

Sagen Sie zum Beispiel traf ich eine URL wie folgt aus:

http://example.com/pet/123456

und sagen, dass es in der Datenbank, wie kann mein SPA eine 404 auf, dass der Inhalt nicht so Haustier.

Fehlt dies, gibt es eine andere Möglichkeit, den Benutzer oder die Suchmaschine korrekt zu warnen, dass die angeforderte URL nicht existiert? Gibt es eine andere Lösung, die ich nicht in Betracht ziehe?

Answer 1

Die eigentliche Frage ist nicht http://example.com/pet/123456 Rückkehr haupt etwas?

Wenn Ihr Ausgangspunkt ist http://example.com/ und es gibt einen Link zu http://example.com/pet/123456 dann Angular die petController was wiederum macht einen AJAX-Aufruf zu http://example.com/api/pet/123456 nennen.

Ein Crawler würde das nicht tun, sondern stattdessen versuchen, http://example.com/pet/123456 direkt aufzurufen.

Ihr Server muss also diesen Aufruf verarbeiten können. Wenn es kein Haustier mit der ID 123456 gibt, sollte es 404 zurückgeben. Problem gelöst. Wenn es da ist sollte es das SPA zurückgeben. Die Anwendung sollte dann die Situation entsprechend behandeln.

Answer 2

Versuchen Sie, diese

angular.module('pets', []) 
 

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

Answer 3

Gemäß dieser Antwort How do search engines deal with AngularJS applications? sollten Sie Headless Browser verwenden, um Crawler-Anforderungen zu verarbeiten und Snapshots der Seite mit dem entsprechenden Antwortcode zurückzuschicken. https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot

Das Google-Beispiel enthielt 301,302 oder 404 Fälle nicht. Ihr Code könnte jedoch geändert werden, um den Inhalt des Snapshots zu analysieren und den Antwortcode zu ändern.

Ich fand prerender.io bietet diesen Service, aber es ist nicht kostenlos. Sie haben jedoch einen kostenlosen Plan, wenn Sie weniger als 250 Seiten haben. Prerender fragt, dass Sie im Fall von 404 oder 301 dem DOM ein Meta-Tag hinzufügen.

Dieses Meta-Tag wird dann von ihrem kopflosen Browser erkannt und der Antwortcode geändert.