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. Auf diese Weise 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 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 scheint gut zu funktionieren!

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

Sie erhalten eine Seite mit „Cannot GET /doggos“ – ein irreführendes 404-Fehler. Da die Webanwendung nur dann funktioniert, wenn man auf die darin enthaltenen Links klickt, ist sie auch irreführend. 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.

Hierzu können wir den Code, der in Zeile 15 beginnt, wie folgt ändern:

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

/* stimmt mit jeder URL überein und der Server antwortet jetzt mit der Webanwendung in index.html für jede 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 jetzt wie erwartet funktionieren.