Irreführende 404-Fehler beheben

Martin Splitt

Single-Page-Apps können unterschiedlichen Content anzeigen, ohne eine neue Seite laden zu müssen. Dazu verwendet er Klick-Handler für Links und die History API. Mit der Verlaufs-API lässt sich der Browsersitzungsverlauf bearbeiten. So können wir die URL aktualisieren, wenn eine andere Seite angezeigt wird (in Single-Page-Apps in der Regel als „Ansicht“ bezeichnet). Außerdem wird sichergestellt, dass die Schaltfläche „Zurück“ des Browsers weiterhin wie erwartet funktioniert.

Sehen Sie sich die Single-Page-App in diesem Codelab an. Es werden entweder Bilder von Katzen oder Hunden angezeigt und es gibt Links, um zwischen den beiden Tieren zu wechseln. Es funktioniert anscheinend einwandfrei.

Aufdecken der irreführenden 404-Fehler

Leider gibt es in der App einen subtilen Fehler. Lass uns einen Blick darauf werfen!

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild Vollbild.
  • Klicken Sie auf den Link Doggos. Beachten Sie, dass sich die URL geändert hat.
  • Laden Sie die App neu.

Sie sehen eine Seite mit „Cannot GET /doggos“ – ein 404-Fehler. Das ist „hinterhältig“, weil die Webanwendung anscheinend einwandfrei funktioniert, solange Sie nur auf Links innerhalb der App klicken. Das Problem tritt auf, 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 wechseln, aber der Server weiß nicht, was er mit den URLs tun soll. Wenn der Server nicht weiß, was er mit einer angeforderten URL tun soll, antwortet er mit dem HTTP-Statuscode 404. Mit diesem Code gibt der Server an, dass er für die angeforderte URL nichts gefunden hat.

In diesem Fall werden die URLs von Suchmaschinen nicht indexiert, da ein Nutzer auf ein Suchergebnis klickt und die Fehlermeldung, aber nicht die gesuchten Inhalte wie die Hundebilder sieht.

Server beheben

In diesem Projekt wird ein Express.js-Server verwendet, der in JavaScript geschrieben wurde. Wir richten den Server so ein, dass er mit index.html antwortet. Die Single-Page-App erledigt den Rest.

  • Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  • Wählen Sie die Datei server.js aus.

Diese Datei enthält den Servercode. Es richtet einen Express.js-Server ein und sendet den Inhalt von index.html. Die Routeneinrichtung in Zeile 15 dient nur der Webanwendung, wenn Anfragen an die URL / gesendet werden. Der Server sollte auch die anderen von uns erstellten URLs bereitstellen. Jetzt ändern wir dies so, dass alle URLs bereitgestellt werden, damit in Zukunft auch weitere URLs verwendet werden können.

Dazu ändern wir den Code ab Zeile 15 in Folgendes:

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

/* entspricht jeder URL und der Server antwortet jetzt für jede angegebene URL mit der Webanwendung in index.html.

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

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