it-swarm.com.de

AngularJS und Behandlung von 404-Fehlern

Was ist der beste Weg, um mit einer AngularJS-App ordentliche 404-Dienste bereitzustellen?

Ein kleiner Hintergrund: Ich baue eine Angular-App und habe mich für die Verwendung entschieden

$locationProvider.html5Mode(true);

weil ich möchte, dass die URLs natürlich erscheinen (und nicht von einer mehrseitigen "traditionellen" Web-App zu unterscheiden sind).

Auf der Serverseite (eine einfache Python Flask-App) habe ich einen Catch-All-Handler, der alles zur Winkel-App umleitet:

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

Nun versuche ich herauszufinden, was ich mit 404-Fehlern tun soll. Die meisten Angular-Apps, die ich gesehen habe, führen Folgendes aus:

.otherwise({ redirectTo: '/' })

was bedeutet, dass es keine Möglichkeit gibt, eine richtige 404 zu servieren.

Ich würde jedoch lieber eine richtige 404 mit einem 404-Statuscode (hauptsächlich für SEO-Zwecke) zurückgeben.

Was ist der beste Weg, um 404s mit Angular zu handhaben? Sollte ich mir keine Sorgen machen und bei einem Catch-All bleiben? Oder sollte ich das Catch-All entfernen und die richtigen 404-Server auf der Server-Seite servieren?

zur besseren Übersicht bearbeitet

42
Ryan

Nachdem ich ein bisschen herumgespielt hatte und einige Gespräche mit Miguel geführt hatte, stellte ich einige Lösungen zusammen:

  1. Verwenden Sie einfach ein Catch-All und sorgen Sie sich nicht um die richtigen 404-Werte. Dies kann mit serverseitigem Code (wie in meiner ursprünglichen Lösung) oder besser mit dem Umschreiben der URL auf Ihrem Webserver eingerichtet werden.
  2. Reservieren Sie einen bestimmten Abschnitt Ihrer Website für Ihre Winkel-App (wie /app). Richten Sie für diesen Abschnitt ein Catch-All ein und sorgen Sie sich nicht um die richtigen 404-Werte. Ihre anderen Seiten werden als reguläre Seiten angezeigt, und der Besuch einer ungültigen URL, die nicht mit /app beginnt, führt zu einer ordnungsgemäßen 404-Anzeige.
  3. Stellen Sie fortlaufend sicher, dass alle Ihre Routen in app.js in Ihrem serverseitigen Code gespiegelt werden (ja, ziemlich ärgerlich), wo diese Routen Ihre Winkel-App bereitstellen sollen. Alle anderen Routen werden 404.

P.S. Die zweite Option ist mein persönlicher Favorit. Ich habe es ausprobiert und es funktioniert ganz gut.

17
Ryan

Ich denke, Sie verwechseln die Flask-Routen mit den Angular-Routen.

Der 404-Fehlercode ist Teil des HTTP-Protokolls. Ein Webserver verwendet sie als Antwort auf einen Client, wenn die angeforderte URL dem Server nicht bekannt ist. Da Sie einen Catch-All in Ihren Flask-Server einfügen, erhalten Sie niemals eine 404. Flask ruft Ihre Ansichtsfunktion für alle URLs auf, die Sie in die Adressleiste eingeben. Meiner Meinung nach sollten Sie keinen Haken haben und Flask einfach mit 404 antworten lassen, wenn der Benutzer eine ungültige URL in die Adressleiste eingibt. Daran ist nichts falsch. Mit Flask können Sie sogar eine benutzerdefinierte Seite senden, wenn ein 404-Code zurückgegeben wird, sodass die Fehlerseite wie der Rest Ihrer Site aussehen kann.

Auf der Angular-Seite gibt es wirklich keine HTTP-Transaktion, da das Routing der Anwendung intern im Client abläuft, ohne dass der Server dies überhaupt weiß. Dies kann Teil Ihrer Verwirrung sein. Angular-Links werden vollständig im Client behandelt, ohne dass Anforderungen an den Server gestellt werden, auch nicht im Modus html5mode. Daher ist in diesem Zusammenhang kein 404-Fehler zu verstehen, weil der Server nicht beteiligt ist. Ein Angular-Link, der Sie zu einer unbekannten Route führt, fällt einfach in die otherwise-Klausel. Das Richtige dabei ist, entweder eine Fehlermeldung anzuzeigen (wenn der Benutzer etwas über diesen Zustand wissen muss und etwas dagegen unternehmen kann) oder einfach die unbekannte Route zu ignorieren, wie dies bei redirectTo: '/' der Fall ist.

Dies scheint nicht Ihr Fall zu sein. Wenn Ihr Server jedoch nicht nur die Angular-Anwendung bereitstellt, sondern auch eine API, die Angular verwenden kann, während er ausgeführt wird, könnte Angular eine 404-Anweisung von Flask erhalten, wenn er eine asynchrone Anforderung an diese API mit Hilfe einer ungültige URL. In diesem Fall möchten Sie dem Benutzer jedoch keine 404-Fehlerseite anzeigen, da die Anforderung intern für die Anwendung war und nicht direkt vom Benutzer ausgelöst wurde.

Ich hoffe, das hilft, die Situation zu klären!

32
Miguel

Dies ist ein alter Thread, aber ich bin auf der Suche nach der Antwort darauf gerast.

Fügen Sie dies am Ende Ihrer appRoutes.js hinzu und erstellen Sie eine 404.html-Ansicht.

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

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

Ich denke, dass ein echter http 404 "für SEO-Zwecke" ziemlich nutzlos sein wird, wenn Sie keinen brauchbaren Nicht-Javascript-Inhalt für echte Seiten Ihrer Website bereitstellen. Es ist unwahrscheinlich, dass ein Suchindexer Ihre kantige Site für die Indexierung rendern kann.

Wenn Sie sich um SEO Sorgen machen, benötigen Sie eine Art serverseitiger Methode, um den Inhalt zu rendern, den Ihre eckigen Seiten darstellen. In diesem Fall ist das Hinzufügen von 404s für ungültige URLs der einfachste Teil des Problems.

0
rjmunro