web-dev-qa-db-fra.com

AngularJS et gestion des erreurs 404

Quelle est la meilleure façon de servir 404 avec une application AngularJS?

Un peu d’arrière-plan: je construis une application angulaire et j’ai choisi d’utiliser

$locationProvider.html5Mode(true);

parce que je veux que les URL paraissent naturelles (et impossibles à distinguer d'une application Web "traditionnelle" de plusieurs pages).

Du côté du serveur (une simple application Python Flask), j'ai un gestionnaire fourre-tout qui redirige tout vers l'application angulaire:

@app.route('/', defaults={'path': ''})
@app.route('/<path>')
def index(path):
    return make_response(open('Ang/templates/index.html').read())

Maintenant, j'essaie de comprendre quoi faire avec les erreurs 404. La plupart des applications angulaires que j'ai vues effectuent les opérations suivantes:

.otherwise({ redirectTo: '/' })

ce qui signifie qu’il n’ya aucun moyen de servir un bon 404.

Cependant, je préférerais de beaucoup renvoyer une 404 appropriée, avec un code de statut 404 (principalement à des fins de référencement).

Quelle est la meilleure façon de gérer les 404 avec Angular? Ne devrais-je pas m'inquiéter à ce sujet et rester avec un fourre-tout? Ou devrais-je retirer le fourre-tout et servir les 404 corrects du côté serveur?

édité pour plus de clarté

javascriptangularjsflaskhttp-status-code-404angularjs-routing
42
Ryan

Après avoir joué quelques instants, ainsi que des discussions avec Miguel, j'ai compilé différentes solutions:

  1. Utilisez simplement un fourre-tout et ne vous inquiétez pas des 404 appropriés. Cela peut être configuré avec un code côté serveur (comme dans ma solution d'origine), ou mieux, avec une réécriture d'URL sur votre serveur Web.
  2. Réservez une certaine section de votre site pour votre application angulaire (telle que /app). Pour cette section, configurez un fourre-tout et ne vous préoccupez pas des versions 404 appropriées. Vos autres pages seront servies en tant que pages normales et la visite de toute URL non valide ne commençant pas par /app donnera un code 404 approprié.
  3. Assurez-vous continuellement que tous vos itinéraires dans app.js sont reflétés dans votre code côté serveur (oui, assez ennuyeux), où vous aurez ces itinéraires servir votre application angulaire. Tous les autres itinéraires seront 404.

P.S. La deuxième option est mon préféré. J'ai essayé cela et ça marche plutôt bien.

17
Ryan

Je pense que vous confondez les itinéraires Flask avec les itinéraires angulaires.

Le code d'erreur 404 fait partie du protocole HTTP. Un serveur Web l'utilise comme réponse à un client lorsque l'URL demandée n'est pas connue du serveur. Étant donné que vous placez un système polyvalent dans votre serveur Flask, vous n'obtiendrez jamais un 404. Flask invoquera votre fonction d'affichage pour toutes les URL que vous tapez dans la barre d'adresse. À mon avis, vous ne devriez pas avoir un fourre-tout et laisser simplement Flask répondre avec 404 lorsque l'utilisateur tape une URL non valide dans la barre d'adresse, il n'y a rien de mal à cela. Flask vous permet même d’envoyer une page personnalisée lorsqu’un code 404 est renvoyé. Vous pouvez ainsi faire en sorte que la page d’erreur ressemble au reste de votre site.

Du côté angulaire, il n’ya vraiment pas de transaction HTTP car tout le routage interne à l’application se fait dans le client sans même que le serveur le sache. Cela peut faire partie de votre confusion. Les liens angulaires sont entièrement gérés dans le client, sans aucune requête adressée au serveur, même en html5mode. Il n’ya donc pas de concept d’erreur 404 dans ce contexte, tout simplement parce qu’il n’ya aucune implication du serveur. Un lien angulaire qui vous envoie vers une route inconnue tombera simplement dans la clause otherwise. La bonne chose à faire ici est d’afficher un message d’erreur (si l’utilisateur a besoin de connaître cette condition et de pouvoir y remédier) ou d’ignorer la route inconnue, comme le fait le redirectTo: '/'.

Cela ne semble pas être votre cas, mais si, en plus de servir l'application Angular, votre serveur implémentait une API pouvant être utilisée par Angular pendant son exécution, Angular pourrait obtenir un 404 de Flask s'il envoyait une requête asynchrone à cette API à l'aide d'un URL invalide. Mais vous ne voudriez pas montrer une page d'erreur 404 à l'utilisateur si cela se produisait, car la demande était interne à l'application et n'était pas déclenchée directement par l'utilisateur.

J'espère que cela aide à clarifier la situation!

32
Miguel

C'est un vieux fil, mais je l'ai parcouru tout en cherchant la réponse.

Ajoutez ceci à la fin de votre appRoutes.js et créez une vue 404.html.

.when('/404', {
    templateUrl: 'views/404.html',
    controller: 'MainController'
})

.otherwise({ redirectTo: '/404' })
2
Russ

Je pense qu'un vrai http 404 va être plutôt inutile "à des fins de référencement" si vous ne diffusez pas de contenu non javascript utilisable pour de vraies pages de votre site. Il est peu probable qu'un indexeur de recherche puisse afficher votre site angulaire à des fins d'indexation.

Si vous êtes préoccupé par le référencement, vous aurez besoin d’une sorte de moyen côté serveur pour restituer le contenu que vos pages angulaires rendent. Si vous avez cela, ajouter 404s pour les URL non valides est la partie la plus facile du problème.

0
rjmunro