Irreführende 404-Fehler beheben

Martin Splitt

In Single-Page-Apps können unterschiedliche Inhalte angezeigt werden, ohne dass eine neue Seite geladen werden muss. Dazu verwenden sie Klick-Handler für Links und die History API. Mit der History API lässt sich der Verlauf der Browsersitzung bearbeiten. So können wir die URL aktualisieren, wenn eine andere Seite (in Single-Page-Apps in der Regel als „Ansicht“ bezeichnet) angezeigt wird. Außerdem wird so dafür gesorgt, dass die Schaltfläche „Zurück“ des Browsers weiterhin wie erwartet funktioniert.

Sehen Sie sich die einseitige 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 scheint gut zu funktionieren.

Den heimtückischen 404-Fehler aufspüren

Leider gibt es einen kleinen Fehler in der App. Lass uns das mal ansehen.

• Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann 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. Das ist „heimtückisch“, weil die Web-App anscheinend einwandfrei funktioniert, solange Sie nur auf Links darin klicken. Die Funktion ist nicht verfügbar, wenn die URLs in einem neuen Browserfenster verwendet oder die Seite aktualisiert wird. Das Problem besteht darin, dass der Server nicht weiß, wie er auf eine Anfrage für diese URLs reagieren soll. Der JavaScript-Code in unserer Web-App verwendet die History API, um zwischen ihnen zu navigieren, aber der Server weiß nicht, was er damit anfangen soll. Wenn der Server nicht weiß, was er mit einer angeforderten URL tun soll, antwortet er mit dem HTTP-Statuscode 404. Mit diesem Code teilt der Server mit, dass er für die angeforderte URL nichts gefunden hat.

Suchmaschinen indexieren die URLs in diesem Fall nicht, da ein Nutzer auf ein Suchergebnis klicken und die Fehlermeldung sehen würde, aber nicht die Inhalte, nach denen er gesucht hat, z. B. die Hundebilder.

Server reparieren

In diesem Projekt wird ein express.js-Server verwendet, der in JavaScript geschrieben wurde. Wir müssen den Server so konfigurieren, dass er mit „index.html“ antwortet. Die App mit nur einer Seite kümmert sich dann um den Rest.

• Klicken Sie auf Remix to Edit (Remix zum Bearbeiten), um das Projekt bearbeitbar zu machen.
• Wählen Sie die Datei server.js aus.

Diese Datei enthält den Servercode. Es wird ein express.js-Server eingerichtet und der Inhalt von index.html gesendet. Die Routeneinrichtung in Zeile 15 stellt die Web-App nur bereit, wenn Anfragen an die URL / gesendet werden. Der Server sollte auch die anderen von uns erstellten URLs bereitstellen. Wir ändern das, damit alle URLs ausgeliefert werden und es auch mit zusätzlichen URLs in der Zukunft funktioniert.

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

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

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

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

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