Irreführende 404-Fehler beheben

Martin Splitt
Martin Splitt
X GitHub

Einseitige Apps können unterschiedliche Inhalte anzeigen, ohne dass eine neue Seite geladen werden muss. Dazu verwenden sie Klick-Handler für Links und die History API. Mit der History API kann der Verlauf der Browsersitzung bearbeitet werden. So können wir die URL aktualisieren, wenn eine andere Seite angezeigt wird (in Single-Page-Apps normalerweise als „Ansicht“ bezeichnet). Außerdem wird sichergestellt, dass der Button „Zurück“ des Browsers weiterhin wie erwartet funktioniert.

Sehen Sie sich die einseitige App in diesem Codelab an. Es werden entweder Katzen- oder Hundebilder angezeigt und es gibt Links, über die Sie zwischen den beiden Tieren wechseln können. Es scheint gut zu funktionieren.

Versteckte 404-Fehler aufdecken

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, klicken Sie auf View App (App ansehen) und dann auf Fullscreen (Vollbild) Vollbild.
  • Klicken Sie auf den Link Doggos. Beachten Sie, wie sich die URL geändert hat.
  • Aktualisieren Sie die App.

Sie erhalten eine Seite mit „Cannot GET /doggos“ – ein versteckter 404-Fehler. Er ist „heimtückisch“, weil die Webanwendung scheinbar einwandfrei funktioniert, solange Sie nur auf Links innerhalb der Anwendung klicken. Sie funktioniert nicht mehr, wenn die URLs in einem neuen Browserfenster verwendet werden 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 navigieren, aber der Server weiß nicht, was er damit tun soll. Wenn der Server nicht weiß, was er für eine angeforderte 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.

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

Server reparieren

In diesem Projekt wird ein in JavaScript geschriebener express.js-Server verwendet. Wir korrigieren den Server, damit er mit „index.html“ antwortet. Die Single-Page-Anwendung kümmert sich um den Rest.

  • Klicken Sie auf Remix erstellen, um zu 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 in Zeile 15 eingerichtete Route stellt die Webanwendung nur bereit, wenn Anfragen an die URL / gesendet werden. Der Server sollte auch die anderen von uns erstellten URLs bereitstellen. Ändern wir dies so, dass alle URLs unterstützt werden, damit es in Zukunft auch mit zusätzlichen URLs funktioniert.

Dazu können wir den Code ab Zeile 15 so ändern:

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

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

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf View App (App ansehen) und dann auf Fullscreen (Vollbild) Vollbild.

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