Corrigir erros 404 não autorizados

Martin Splitt
Martin Splitt

Os apps de página única podem mostrar conteúdo diferente sem carregar uma nova página. Para fazer isso, eles usam manipuladores de cliques em links e a API History. A API History permite manipular o histórico de sessões do navegador. Dessa forma, podemos atualizar o URL ao mostrar uma página diferente (geralmente chamada de "visualização" em apps de página única). Ele também garante que o botão "Voltar" do navegador ainda funcione conforme o esperado.

Confira o app de página única neste codelab. Ele mostra imagens de gatos ou cães e fornece links para alternar entre os dois animais. Parece que está funcionando bem.

Descobrindo o erro 404 oculto

Infelizmente, há um bug sutil no app. Vamos conferir!

  • Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.
  • Clique no link Doggos. Observe como o URL mudou.
  • Atualize o app.

Você recebe uma página com "Cannot GET /doggos", um 404 oculto. É "secreto", porque o app da Web parece funcionar bem, desde que você clique apenas nos links dentro dele. Ele é interrompido ao usar os URLs em uma nova janela do navegador ou ao atualizar a página. O problema é que o servidor não sabe como responder a uma solicitação para esses URLs. O código JavaScript no nosso app da Web está usando a API History para navegar entre eles, mas o servidor não sabe o que fazer com eles. Sempre que o servidor não sabe o que fazer para um URL solicitado, ele responde com o código de status HTTP 404. Com esse código, o servidor diz que não encontrou nada para o URL solicitado.

Os mecanismos de pesquisa não indexarão os URLs nesse caso, porque um usuário clicaria em um resultado da pesquisa e encontraria a mensagem de erro, mas não o conteúdo que estava procurando, como fotos de cachorros.

Como corrigir o servidor

Este projeto usa um servidor express.js escrito em JavaScript. Vamos corrigir o servidor para que ele responda com index.html, e o app de página única vai cuidar do resto.

  • Clique em Remixar para editar para tornar o projeto editável.
  • Selecione o arquivo server.js.

Esse arquivo contém o código do servidor. Ele configura um servidor express.js e envia o conteúdo de index.html. A configuração de rota na linha 15 só serve o app da Web quando as solicitações vão para o URL /. O servidor também precisa exibir os outros URLs que criamos. Vamos mudar isso para veicular todos os URLs, para que também funcione com outros URLs no futuro.

Para isso, podemos alterar o código a partir da linha 15 para o seguinte:

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

O /* corresponde a qualquer URL, e o servidor agora responde com o app da Web em index.html para qualquer URL.

  • Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.

A atualização e a abertura dos links em uma nova janela anônima agora devem funcionar conforme o esperado.