Naprawianie niejawnych błędów 404

Aplikacje na jednej stronie mogą wyświetlać różne treści bez wczytywania nowej strony. Do zrobienia więc używają modułów obsługi kliknięć w linkach i interfejsie History API. Historia API umożliwia manipulowania historią sesji przeglądarki. Dzięki temu możemy zaktualizować URL, gdy pokazywanie innej strony (zwykle jest to nazywane „widokiem” w aplikacjach jednostronicowych). Dodatkowo sprawdź, czy przycisk Wstecz w przeglądarce działa zgodnie z oczekiwaniami.

W ramach tego ćwiczenia z programowania przyjrzymy się aplikacji składającej się z pojedynczej strony. Wyświetla kota lub piesa i linki do przełączania się między nimi. Wygląda na to, że działa dobrze!

Wykrywanie tajemnicze 404

Niestety w aplikacji występuje drobny błąd. Spójrzmy!

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran pełny ekran
  • Kliknij link Doggos. Zwróć uwagę, jak zmienił się adres URL.
  • Załaduj ponownie aplikację.

Wyświetlono stronę z wartością „Cannot GET /doggos” to podstępny błąd 404. Jest niejasna, Ponieważ aplikacja internetowa działa dobrze, o ile klikasz tylko linki . Przestaje on działać przy użyciu adresów URL w nowym oknie przeglądarki lub przy odświeżaniu stronę. Serwer nie wie, jak odpowiedzieć na żądanie dotyczące tych adresów URL. Kod JavaScript w naszej aplikacji internetowej korzysta z interfejsu History API do ale serwer nie wie, co z nimi zrobić. Gdy serwer nie wie, co zrobić z żądanym adresem URL, odpowiada z kodem stanu HTTP 404. Po jego użyciu serwer informuje, że nie znalazł wszystkie wartości w żądanym adresie URL.

W tym przypadku wyszukiwarki nie zindeksują adresów URL, ponieważ użytkownik kliknąłby w wynikach wyszukiwania i wyświetla komunikat o błędzie, ale nie treść takich jak zdjęcia psów.

Naprawianie serwera

Ten projekt wykorzystuje serwer express.js napisany w języku JavaScriptu. Naprawmy serwer, by odpowiadał za pomocą pliku index.html i aplikacja strony zajmie się resztą.

  • Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
  • Wybierz plik server.js.

Ten plik zawiera kod serwera. Konfiguruje serwer express.js i wysyła zawartość pliku index.html. Konfiguracja trasy w wierszu 15 jest obsługiwana tylko przez aplikację internetową. gdy żądania trafiają na adres URL /. Serwer powinien także podawać inne adresy URL, utworzone przez użytkowników. Zmieńmy to ustawienie tak, by wyświetlały się wszystkie adresy URL, by wyświetlały się o dodawaniu kolejnych adresów URL w przyszłości.

W tym celu możemy zmienić kod zaczynający się w wierszu 15 na taki:

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

/* pasuje do dowolnego adresu URL, a serwer odpowiada teraz aplikacji internetowej w index.html dla dowolnego adresu URL.

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran pełny ekran

Odświeżanie i otwieranie linków w nowym oknie incognito powinno teraz działać jako nie jest oczekiwany.