Irreführende 404-Fehler beheben

Martin Splitt

In Single-Page-Apps können unterschiedliche Inhalte angezeigt werden, ohne dass eine neue Seite geladen wird. Dazu verwendet er Klick-Handler für Links und die History API. Mit der History API können Sie den Browser-Sitzungsverlauf manipulieren. 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.

Der fiese 404-Fehler

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

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann 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 reagieren soll. Der JavaScript-Code in unserer Webanwendung verwendet die History API, um zwischen ihnen zu wechseln, aber der Server weiß nicht, was er damit 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. Ändern wir das so, dass alle URLs ausgeliefert werden, damit es auch in Zukunft mit zusätzlichen URLs funktioniert.

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.