Corrigir erros 404 não autorizados

Martin Splitt
Martin Splitt

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

Confira o app de página única neste codelab. Mostra um gato ou um cachorro imagens e fornece links para alternar entre os dois animais. Parece que funciona tudo bem!

Desvendando o erro 404 não autorizado

Infelizmente, há um bug sutil no app. Vamos dar uma olhada!

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

Você recebe uma página com "Cannot GET /doggos" um erro 404 furtivo. É "sorrateira", porque o app da Web parece funcionar bem, contanto que você clique apenas nos links reimplantá-lo. Ele falha ao usar os URLs em uma nova janela do navegador ou ao atualizar o página. O problema é que o servidor não sabe como responder a uma solicitação de esses URLs. O código JavaScript em nosso aplicativo 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 pelo 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 encontraram a mensagem de erro, mas não o conteúdo procurando, como fotos de cães.

Como corrigir o servidor

Esse projeto usa um servidor express.js escrito em JavaScript. Vamos corrigir o servidor para que ele responda com index.html e a única o Google Page cuida 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 da rota na linha 15 atende apenas ao aplicativo da Web quando as solicitações vão para o URL /. O servidor também deve veicular os outros URLs tenham criado. Vamos alterá-lo para exibir todos os URLs, para que também funcione com URLs adicionais 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 Ver app. Em seguida, pressione Tela cheia tela cheia

Atualizar e abrir os links em uma nova janela anônima agora deve funcionar como o esperado.