Messages de statut HTTP

Chaque fois qu'un navigateur charge une page, soumet un formulaire ou que votre JavaScript effectue un appel fetch(), le serveur répond avec un code de statut HTTP à trois chiffres. Ce code indique au client si la requête a réussi, a été redirigée, a échoué en raison d'une erreur côté client ou d'une erreur côté serveur. Le navigateur l'utilise automatiquement — il suit les redirections, affiche sa propre page d'erreur pour certains codes et réutilise le contenu en cache pour d'autres — mais en tant que développeur, vous lisez aussi ces codes directement : un formulaire est envoyé et vous branchez sur la réponse, ou un fetch() se résout et vous vérifiez response.ok (qui signifie simplement « statut dans la plage 200–299 »).

Vous trouverez ici la liste des codes de statut de réponse du Hypertext Transfer Protocol (HTTP). Ces codes répondent à la requête qu'un client adresse à un serveur — que cette requête utilise GET, POST ou une autre méthode HTTP — et ils sont regroupés en 5 classes selon leur premier chiffre. Les connaître vous aide à déboguer les liens brisés, les URL incorrectes, les soumissions de formulaires échouées et les réponses API inattendues. Parcourons chaque classe :

Gestion des codes de statut en JavaScript

Lorsque vous soumettez un formulaire ou appelez une API avec fetch(), la requête réussit (la promesse se résout) même si le serveur retourne une erreur 4xx ou 5xx — un 404 ou 500 reste une réponse HTTP valide, et non une défaillance réseau. Vous devez donc inspecter le statut vous-même. Le raccourci pratique est response.ok, qui vaut true uniquement pour la plage 200–299 ; pour tout autre cas, vous branchez sur response.status pour réagir de manière appropriée :

const form = document.querySelector("#signup");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const response = await fetch("/api/signup", {
    method: "POST",
    body: new FormData(form),
  });

  if (response.ok) {
    // 200–299: success
    window.location.href = "/welcome";
  } else if (response.status === 401) {
    showMessage("Please log in first.");
  } else if (response.status === 422) {
    // Validation errors returned as JSON
    const data = await response.json();
    showMessage(data.error);
  } else if (response.status === 429) {
    // Rate limited — respect the Retry-After header
    const wait = response.headers.get("Retry-After");
    showMessage(`Too many attempts. Try again in ${wait}s.`);
  } else if (response.status >= 500) {
    showMessage("Server error — please try again later.");
  } else {
    showMessage(`Unexpected error (${response.status}).`);
  }
});

Notez que fetch() ne rejette qu'en cas de véritables problèmes réseau (pas de connexion, blocage CORS, échec DNS), donc encapsuler l'appel dans un try…catch gère ces cas, tandis que le if/else ci-dessus gère le statut HTTP lui-même.

1xx : Information

2xx : Succès

3xx : Redirection

Les codes non listés ici (comme 305 et 306) sont dépréciés, rares ou spécifiques à des extensions.

4xx : Erreur client

Les codes non listés ici (comme 419, 420 et plusieurs dans la plage 423–431) sont rares, spécifiques à un framework ou non standard. Certains — comme 421 (Misdirected Request, utilisé en HTTP/2) et 451 ci-dessus — sont normalisés mais peu courants dans le travail quotidien.

5xx : Erreur serveur

Chapitres associés

Le statut retourné par un serveur dépend souvent de la requête elle-même. Pour aller plus loin, consultez :

• Méthodes HTTP — GET, POST et autres, qui déterminent le comportement de certaines redirections (302 vs 307).
• Formulaires HTML — comment les soumissions de formulaires déclenchent des requêtes pouvant retourner 303, 422 ou 429.
• URL HTML (Uniform Resource Locators) — les adresses vers lesquelles pointent les redirections 3xx et les réponses 404.

Exercice