Corrige errores 404 engañosos

Martin Splitt
Martin Splitt

Las apps de una sola página pueden mostrar contenido diferente sin cargar una página nueva. Para ello, utilizan controladores de clics en los vínculos y la API de History. La API de History permite manipular el historial de sesiones del navegador. De esta manera, podemos actualizar la URL cuando se muestra una página diferente (por lo general, se denomina "vista" en las apps de una sola página). También se asegura de que el botón Atrás del navegador siga funcionando como se espera.

Observa la app de una sola página en este codelab. Muestra imágenes de gatos o perros y proporciona vínculos para alternar entre los dos animales. Parece que funciona bien.

Descubre el error 404 oculto

Lamentablemente, hay un error sutil en la app. Veamos qué sucede.

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completapantalla completa.
  • Haz clic en el vínculo Doggos. Observa cómo cambió la URL.
  • Vuelve a cargar la app.

Recibes una página con "Cannot GET /doggos": un error engañoso 404. Es "sospechosa", porque la app web parece funcionar bien, siempre y cuando solo hagas clic en los vínculos dentro de ella. Se interrumpe cuando se usan las URLs en una nueva ventana del navegador o cuando se actualiza la página. El problema es que el servidor no sabe cómo responder a una solicitud de estas URLs. El código JavaScript de nuestra app web usa la API de History para navegar entre ellas, pero el servidor no sabe qué hacer con ellas. Cada vez que el servidor no sabe qué hacer para una URL solicitada, responde con el código de estado HTTP 404. Con este código, el servidor indica que no encontró nada para la URL solicitada.

En este caso, los motores de búsqueda no indexarán las URLs, ya que un usuario haría clic en un resultado de la búsqueda y encontraría el mensaje de error, pero no el contenido que buscaba, como las imágenes de perros.

Cómo corregir el servidor

Este proyecto usa un servidor express.js escrito en JavaScript. Corrijamos el servidor, para que responda con index.html, y la app de una sola página se encargará del resto.

  • Haz clic en Remix para editar para que el proyecto sea editable.
  • Selecciona el archivo server.js.

Este archivo contiene el código del servidor. Configura un servidor express.js y envía el contenido de index.html. La configuración de la ruta en la línea 15 solo entrega la app web cuando las solicitudes van a la URL /. El servidor también debe entregar las otras URLs que creamos. Cambiemos esto para que se entreguen todas las URLs, de modo que también funcione con URLs adicionales en el futuro.

Para ello, podemos cambiar el código que comienza en la línea 15 a lo siguiente:

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

/* coincide con cualquier URL y el servidor ahora responde con la app web en index.html para cualquier URL determinada.

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completapantalla completa.

Ahora, la actualización y apertura de los vínculos en una nueva ventana de incógnito debería funcionar según lo previsto.