Irreführende 404-Fehler beheben

Martin Splitt

Single-Page-Apps können unterschiedlichen Content anzeigen, ohne eine neue Seite laden zu müssen. Aufgabe Daher werden für Links und die History API Klick-Handler verwendet. Die Geschichte API ermöglicht Folgendes: Browsersitzungsverlauf zu beeinflussen. So können wir die URL aktualisieren, mit einer anderen Seite (in Single-Page-Apps normalerweise als "Ansicht" bezeichnet). Außerdem stellt sicher, dass die Schaltfläche "Zurück" des Browsers weiterhin wie erwartet funktioniert.

In diesem Codelab können Sie sich die Single-Page-Anwendung ansehen. Es wird entweder eine Katze oder ein Hund gezeigt. Bilder und Links, um zwischen den beiden Tieren zu wechseln. Es scheint zu funktionieren gut!

Aufdecken der irreführenden 404-Fehler

Leider gibt es einen subtilen 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. Drücken Sie dann 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“ einen geheimen 404-Fehler. Es ist „verwirrend“, da die Webanwendung gut zu funktionieren scheint, solange Sie nur auf Links innerhalb . Sie funktioniert nicht mehr, wenn die URLs in einem neuen Browserfenster verwendet werden oder wenn die Seite. Das Problem ist, dass der Server nicht weiß, wie er auf eine Anforderung für diese URLs. Der JavaScript-Code in unserer Webanwendung verwendet die History API, zwischen ihnen navigieren können, aber der Server weiß nicht, was mit ihnen zu tun ist. Wenn der Server nicht weiß, wie er mit einer angeforderten URL zu tun hat, antwortet er. durch den HTTP-Statuscode 404. Mit diesem Code meldet der Server, alles für die angeforderte URL.

Suchmaschinen indexieren die URLs in diesem Fall nicht, da der Nutzer und die Fehlermeldung finden, aber nicht den Inhalt, Hundebilder suchen.

Fehler beim Server beheben

Dieses Projekt verwendet einen express.js-Server, geschrieben in JavaScript Reagieren wir auf den Server, sodass er mit „index.html“ und dem einzelnen übernimmt den Rest.

  • Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
  • 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". Bei der Routeneinrichtung in Zeile 15 wird nur die Web-App genutzt. wenn Anfragen an die URL / gesendet werden. Der Server sollte auch die anderen URLs die Sie erstellt haben. Ändern wir dies so, dass alle URLs geschaltet werden, damit es auch mit in Zukunft weitere URLs hinzufügen.

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 eine URL.

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild

Das Aktualisieren und Öffnen der Links in einem neuen Inkognitofenster sollte jetzt wie folgt funktionieren: zu erwarten war.