Irreführende 404-Fehler beheben

Martin Splitt

Einseitige Apps können verschiedene Inhalte anzeigen, ohne eine neue Seite laden zu müssen. Dazu werden Klick-Handler für Links und die History API verwendet. Mit der Verlauf API können Sie den Sitzungsverlauf des Browsers bearbeiten. So können wir die URL aktualisieren, wenn eine andere Seite angezeigt wird (in Single-Page-Apps meist als „Ansicht“ bezeichnet). Außerdem wird so sichergestellt, dass die Browserschaltfläche „Zurück“ weiterhin wie erwartet funktioniert.

Sehen Sie sich in diesem Codelab die Single Page App an. Es zeigt Bilder von Katzen oder Hunden sowie Links, um zwischen den beiden Tieren zu wechseln. Es scheint gut zu funktionieren!

Aufdeckung der geheimen 404-Fehler

Leider gibt es einen kleinen Fehler in der App. Sehen wir uns das genauer an.

  • Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.
  • Klicken Sie auf den Link Doggos. Sie sehen, wie sich die URL geändert hat.
  • Aktualisieren Sie die App.

Sie sehen eine Seite mit „Cannot GET /doggos“ – eine irreführende 404-Fehlermeldung. Die Webanwendung ist „vertraulich“, da die Webanwendung einwandfrei zu funktionieren scheint, solange Sie nur auf darin enthaltene Links klicken. Sie funktioniert nicht mehr, wenn die URLs in einem neuen Browserfenster verwendet oder die Seite aktualisiert wird. Das Problem ist, dass der Server nicht weiß, wie er auf eine Anfrage für diese URLs antworten soll. Der JavaScript-Code in unserer Webanwendung verwendet die History API, um zwischen den URLs zu navigieren. Der Server weiß jedoch nicht, was er damit tun soll. Wenn der Server nicht weiß, wie er bei einer angeforderten URL vorgehen soll, antwortet er mit dem HTTP-Statuscode 404. Mit diesem Code meldet der Server, dass er nichts für die angeforderte URL gefunden hat.

Suchmaschinen indexieren die URLs in diesem Fall nicht, da ein Nutzer auf ein Suchergebnis klicken und die Fehlermeldung finden würde, aber nicht den gesuchten Inhalt, z. B. die Hundebilder.

Serverprobleme beheben

Dieses Projekt verwendet einen in JavaScript geschriebenen express.js-Server. Wir reparieren den Server, sodass er „index.html“ zurückgibt. Die Single-Page-Anwendung erledigt den Rest.

  • Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  • Wählen Sie die Datei server.js aus.

Diese Datei enthält den Servercode. Sie richtet einen express.js-Server ein und sendet den Inhalt der Datei index.html. Die Routeneinrichtung in Zeile 15 wird nur verwendet, wenn Anfragen an die URL / gesendet werden. Der Server sollte auch die anderen von uns erstellten URLs bereitstellen. Wir ändern dies so, dass alle URLs bereitgestellt werden, damit es in Zukunft auch mit zusätzlichen URLs funktioniert.

Dazu können wir den Code beginnend bei Zeile 15 wie folgt ändern:

app.get('/*', function(request, response) {
  response.sendFile(__dirname + '/views/index.html');
});

/* stimmt mit jeder beliebigen URL überein und der Server antwortet jetzt mit der Web-App in index.html für jede gegebene URL.

  • Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.

Das Aktualisieren und Öffnen der Links in einem neuen Inkognitofenster sollte jetzt wie erwartet funktionieren.