Article original : Learn HTTP Methods like GET, POST, and DELETE – a Handbook with Code Examples

Lorsque vous interagissez avec des sites web ou des applications, beaucoup de choses se passent en coulisses. Une partie essentielle de ce processus est la manière dont votre navigateur ou votre application communique avec un serveur. Les méthodes HTTPS définissent l'action qui doit être effectuée – qu'il s'agisse de récupérer des données, d'envoyer des informations ou d'apporter des modifications à un contenu existant.

Chaque méthode répond à un objectif spécifique afin de maintenir une communication web claire, sécurisée et organisée.

Dans cet article, nous allons détailler les méthodes HTTPS les plus courantes et expliquer comment elles fonctionnent pour assurer la fluidité des interactions en ligne.

Table des matières

  1. Méthode GET

  2. Méthode POST

  3. Méthode PUT

  4. Méthode PATCH

  5. Méthode DELETE

  6. Méthode HEAD

  7. Méthode OPTIONS

  8. Méthode TRACE

  9. Méthode CONNECT

  10. Conclusion

Méthode GET

La méthode GET est l'une des méthodes HTTP les plus courantes et elle est utilisée pour demander des données à un serveur. Considérez-la comme une demande d'information sans rien modifier.

Lorsque vous visitez une page web, votre navigateur envoie une requête GET au serveur pour demander le contenu de la page. Le serveur répond ensuite avec les données (telles que le HTML, les images ou d'autres fichiers) que le navigateur affiche.

Un point important concernant GET est qu'il n'apporte aucune modification aux données. Il se contente de "lire" ou de récupérer l'information. Par exemple, lorsque vous parcourez les réseaux sociaux ou recherchez des produits en ligne, l'application ou le site web utilise GET pour afficher les données sans les altérer.

Un autre point clé est que les requêtes GET envoient des paramètres directement dans l'URL. Cela signifie que toutes les données que vous demandez sont visibles dans la barre d'adresse du navigateur. Par exemple, si vous recherchez un produit sur une boutique en ligne, le terme de recherche est inclus dans l'URL.

Exemple d'une requête GET

Voici un exemple simple d'une requête GET en JavaScript utilisant l'API Fetch :

fetch('https://api.example.com/products?category=shoes')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Dans cet exemple, la requête GET est effectuée vers l'URL https://api.example.com/products avec un paramètre de requête category=shoes, demandant au serveur de renvoyer les produits de la catégorie chaussures.

Cas d'utilisation de la méthode GET

GET est principalement utilisé pour récupérer des informations, et il existe de nombreux scénarios courants où elle est appliquée :

  1. Chargement d'une page web : Chaque fois que vous tapez une URL dans votre navigateur ou que vous cliquez sur un lien, vous effectuez une requête GET. Le navigateur demande la page web au serveur, et le serveur renvoie le contenu à afficher.

    • Exemple : GET /index.html HTTP/1.1
  2. Récupération de données depuis des API : Lorsque les développeurs créent des applications, ils utilisent souvent des API (Application Programming Interfaces) pour obtenir des données de serveurs externes. Par exemple, une application météo utilise une requête GET pour récupérer la température actuelle depuis une API météo.

    • Exemple :
    fetch('https://api.weather.com/current?city=Lagos')
       .then(response => response.json())
       .then(data => console.log(data));
  1. Requêtes de recherche : Lorsque vous effectuez une recherche sur Google ou d'autres moteurs de recherche, une requête GET est effectuée. Le terme de recherche que vous avez saisi est inclus dans l'URL, et le serveur renvoie une liste de résultats correspondants.

    • Exemple : GET /search?q=JavaScript
  2. Récupération de fichiers : Que vous téléchargiez une image, consultiez un PDF ou lisiez une vidéo, GET est utilisé pour récupérer ces fichiers depuis un serveur.

    • Exemple : GET /files/image.jpg

Bonnes pratiques pour les requêtes GET

Pour utiliser les requêtes GET efficacement, il est important de suivre certaines bonnes pratiques afin de garantir une manipulation des données fluide et sécurisée :

  1. Utiliser GET uniquement pour la récupération de données : Les requêtes GET sont destinées à récupérer des données, pas à envoyer des informations sensibles comme des mots de passe ou des données personnelles. Étant donné que les paramètres d'une requête GET sont inclus dans l'URL, n'importe qui peut les voir. Par exemple, si vous vous connectez à un site web, vous ne devriez pas utiliser GET pour envoyer votre mot de passe, car il s'afficherait dans l'URL.

    • Exemple de ce qu'il ne faut pas faire :
    fetch('https://example.com/login?username=john&password=secret');
  1. Garder des URL courtes et propres : Comme les requêtes GET incluent des données dans l'URL, les URL trop longues peuvent devenir problématiques. Il existe également une limite à la quantité de données pouvant être incluses dans l'URL d'une requête GET (selon le navigateur et le serveur), évitez donc d'y mettre trop d'informations. Si vous devez envoyer beaucoup de données, envisagez d'utiliser une requête POST à la place.

  2. Activer la mise en cache pour la performance : Les requêtes GET sont souvent mises en cache par les navigateurs, ce qui signifie que le navigateur peut stocker la réponse et la réutiliser sans contacter à nouveau le serveur. Cela améliore les performances, en particulier pour le contenu statique qui ne change pas souvent, comme les images ou les feuilles de style. Pour en profiter, assurez-vous que votre serveur envoie les en-têtes cache-control appropriés.

    • Exemple de configuration d'en-têtes de cache :
    Cache-Control: max-age=3600
  1. Éviter d'utiliser GET pour des actions qui modifient les données : Puisque GET est une méthode "sûre", elle ne doit être utilisée que pour des actions qui ne modifient pas les données. Si vous souhaitez créer, mettre à jour ou supprimer des données, utilisez des méthodes comme POST, PUT ou DELETE. Par exemple, si vous utilisez accidentellement GET pour supprimer une ressource, quelqu'un pourrait la supprimer simplement en cliquant sur un lien ou en rafraîchissant la page, ce qui n'est pas sûr.

    • Exemple de ne pas utiliser GET pour la suppression :
    GET /delete/user/123
  1. Être prudent avec les données sensibles : Comme les requêtes GET font partie de l'URL, elles peuvent être enregistrées dans les journaux (logs) ou sauvegardées dans l'historique du navigateur. Évitez d'envoyer des informations sensibles comme des mots de passe, des détails de carte de crédit ou des données privées dans une requête GET. Utilisez toujours des méthodes comme POST pour gérer de telles informations, ce qui permet de les garder masquées.

Méthode POST

La méthode POST est utilisée pour envoyer des données à un serveur. Contrairement à la méthode GET, qui ne fait que récupérer des données, POST vous permet de soumettre des informations que le serveur peut utiliser pour les traiter ou les stocker. POST est couramment utilisé dans les formulaires, où les utilisateurs saisissent des données telles que des noms d'utilisateur, des mots de passe ou des coordonnées.

Lorsqu'une requête POST est effectuée, les données sont envoyées dans le corps (body) de la requête plutôt que dans l'URL. Cela rend POST idéal pour l'envoi d'informations volumineuses ou sensibles, car les données sont masquées et n'apparaissent pas dans la barre d'adresse du navigateur.

Par exemple, lorsque vous vous inscrivez sur un site web ou que vous soumettez un commentaire sur un blog, la méthode POST est utilisée pour envoyer vos informations au serveur, qui les traite et les stocke dans une base de données.

Exemple d'une requête POST

Voici un exemple de requête POST utilisant l'API Fetch pour envoyer des données de formulaire à un serveur :

const formData = {
  username: 'john_doe',
  password: 'mypassword123'
};

fetch('https://example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

Dans cet exemple, la requête POST envoie username et password sous forme de données JSON dans le corps de la requête, ce qui constitue un moyen sécurisé de gérer des informations sensibles.

Différences entre GET et POST

Bien que GET et POST soient utilisés pour communiquer avec un serveur, ils servent des objectifs différents et gèrent les données de manières distinctes :

Transmission des données :

  • GET : Les données sont incluses dans l'URL, ce qui les rend visibles dans la barre d'adresse. Cela limite la quantité de données pouvant être envoyées.

  • POST : Les données sont envoyées dans le corps de la requête, ce qui permet d'envoyer des quantités d'informations plus importantes. Cela permet également de garder les informations sensibles cachées de l'URL.

Objectif :

  • GET : Utilisé pour récupérer des données. Il ne change ni ne modifie rien sur le serveur.

  • POST : Utilisé pour envoyer des données qui peuvent modifier ou s'ajouter aux ressources du serveur, comme l'ajout d'un nouvel utilisateur à une base de données ou la soumission d'un formulaire.

Mise en cache :

  • GET : Les requêtes GET peuvent être mises en cache. Cela signifie que le navigateur peut enregistrer la réponse, rendant les futures requêtes plus rapides.

  • POST : Les requêtes POST ne sont pas mises en cache, car elles impliquent souvent des données nouvelles ou mises à jour qui ne devraient pas être réutilisées.

Idempotence :

  • GET : Envoyer la même requête GET plusieurs fois ne change pas le résultat. Elle renverra les mêmes données à chaque fois.

  • POST : Envoyer la même requête POST plusieurs fois peut entraîner des résultats différents. Par exemple, soumettre un formulaire deux fois pourrait créer des entrées en double.

Scénarios courants pour l'utilisation de POST

POST est idéal dans les situations où vous devez envoyer des données au serveur, souvent pour traitement ou stockage. Voici quelques cas d'utilisation courants :

  1. Soumission de formulaires : Chaque fois que vous remplissez et soumettez un formulaire en ligne, comme l'inscription à une newsletter ou la saisie de vos coordonnées dans un formulaire d'inscription, la méthode POST est utilisée pour envoyer ces informations au serveur.

    • Exemple :
    <form action="https://example.com/register" method="POST">
      <input type="text" name="username" />
      <input type="password" name="password" />
      <button type="submit">Sign Up</button>
    </form>
  1. Authentification des utilisateurs : Lorsque vous vous connectez à un site web à l'aide d'un nom d'utilisateur et d'un mot de passe, POST est souvent utilisé pour envoyer vos identifiants de manière sécurisée au serveur.

  2. Téléchargement de fichiers (Upload) : POST est également utilisé pour télécharger des fichiers, tels que des images, des documents ou des vidéos. Comme la méthode POST permet d'envoyer de grandes quantités de données, elle est parfaite pour les fichiers.

    • Exemple utilisant un formulaire pour le téléchargement de fichiers :
    <form action="https://example.com/upload" method="POST" enctype="multipart/form-data">
      <input type="file" name="file" />
      <button type="submit">Upload File</button>
    </form>
  1. Création de nouvelles ressources : POST est souvent utilisé dans les API pour créer de nouvelles ressources. Par exemple, lorsque vous ajoutez un nouveau produit à une boutique en ligne.

    • Exemple d'envoi de données produit :
    const product = {
      name: 'New Sneakers',
      price: 59.99,
      category: 'Footwear'
    };

    fetch('https://example.com/api/products', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(product)
    })
    .then(response => response.json())
    .then(data => console.log('Product added:', data));
  1. Envoi de données à une API : POST est largement utilisé dans les API lorsque vous devez envoyer des données qui seront traitées ou stockées.

  2. Achats en ligne : Lorsque vous effectuez un achat en ligne, POST est utilisé pour envoyer les détails du paiement au serveur pour traitement.

Méthode PUT

La méthode PUT est utilisée pour mettre à jour ou remplacer une ressource existante sur le serveur. Elle envoie des données au serveur et lui demande de créer une nouvelle ressource si elle n'existe pas, ou de remplacer l'actuelle si elle existe. L'idée clé de PUT est que vous indiquez au serveur exactement à quoi la ressource doit ressembler.

Par exemple, imaginez un profil utilisateur sur un site web. Si vous utilisez PUT pour mettre à jour votre profil, le serveur remplacera l'intégralité du profil par les nouvelles données que vous fournissez. Chaque partie du profil correspondra exactement à ce que vous envoyez ; ainsi, si certains détails sont manquants, ils seront écrasés par les nouvelles données.

Exemple d'une requête PUT

Voici un exemple de requête PUT utilisant l'API Fetch pour mettre à jour les données d'un utilisateur :

const updatedProfile = {
  username: 'john_doe_updated',
  email: 'john_updated@example.com',
  age: 30
};

fetch('https://example.com/users/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(updatedProfile)
})
.then(response => response.json())
.then(data => console.log('Updated:', data))
.catch(error => console.error('Error:', error));

Dans cet exemple, la requête PUT met à jour le profil utilisateur avec de nouvelles données. Le profil sera remplacé par les valeurs username, email et age. Si une donnée est manquante, comme phoneNumber, elle sera supprimée du profil.

Quand utiliser PUT

PUT est principalement utilisé lorsque vous souhaitez mettre à jour ou remplacer une ressource avec des données spécifiques et complètes. Voici quelques situations courantes où PUT est approprié :

  1. Mise à jour d'une ressource : Lorsque vous devez apporter des modifications à une ressource existante, PUT est utilisé pour envoyer une nouvelle version de l'intégralité de la ressource.

    • Exemple :
    const updatedPost = {
      title: 'New Title for My Blog',
      content: 'Updated blog content here...',
      author: 'John Doe'
    };

    fetch('https://example.com/blog/45', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updatedPost)
    });
  1. Création d'une ressource si elle n'existe pas : Si vous envoyez une requête PUT à une URL spécifique qui n'a pas encore de ressource, le serveur en créera une en utilisant les données fournies.

  2. Utilisation avec des API : Lors de l'interaction avec des API, PUT est souvent utilisé pour mettre à jour des ressources comme un profil utilisateur ou les détails d'un produit.

PUT vs POST : Différences clés

Bien que PUT et POST puissent tous deux envoyer des données à un serveur, ils ont des objectifs et des comportements différents :

Objectif :

  • PUT : Principalement utilisé pour mettre à jour ou remplacer une ressource existante. Si la ressource n'existe pas, PUT peut également la créer.

  • POST : Principalement utilisé pour créer de nouvelles ressources ou soumettre des données à traiter. POST ne remplace pas les ressources existantes mais en ajoute de nouvelles.

Gestion des données :

  • PUT : Remplace l'intégralité de la ressource par les nouvelles données. Si une partie de la ressource est manquante dans la requête, elle est supprimée ou remplacée.

  • POST : Ajoute ou met à jour des ressources sans remplacer l'ensemble.

Idempotence :

  • PUT : Est idempotent, donc envoyer la même requête PUT plusieurs fois donnera toujours le même résultat.

  • POST : N'est pas idempotent, donc soumettre la même requête POST plusieurs fois pourrait créer des ressources en double.

Méthode PATCH

La méthode PATCH est utilisée pour effectuer des mises à jour partielles d'une ressource sur le serveur. Contrairement à la méthode PUT, qui remplace l'intégralité de la ressource, PATCH vous permet de mettre à jour des parties spécifiques d'une ressource sans renvoyer l'ensemble des données. Cela rend PATCH idéal pour les scénarios où vous ne souhaitez modifier que certains détails.

Par exemple, si vous avez un profil utilisateur et que vous souhaitez mettre à jour uniquement le numéro de téléphone, PATCH vous permet d'envoyer juste le nouveau numéro de téléphone tout en laissant le reste du profil inchangé.

Mises à jour partielles avec PATCH

PATCH est conçu pour effectuer des changements ciblés. Voici comment cela fonctionne :

  • Changements ciblés : Avec PATCH, vous ne spécifiez que les champs que vous souhaitez mettre à jour.
  • Efficacité : PATCH est plus efficace que PUT car il permet d'envoyer uniquement les données modifiées, ce qui réduit l'utilisation de la bande passante.
  • Pas d'écrasement total : Contrairement à PUT, PATCH ne remplace pas toute la ressource.

Exemple d'une requête PATCH

Voici un exemple simple d'utilisation de la méthode PATCH pour mettre à jour un champ spécifique, comme l'adresse e-mail d'un utilisateur :

const updatedEmail = {
  email: 'new_email@example.com'
};

fetch('https://example.com/users/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(updatedEmail)
})
.then(response => response.json())
.then(data => console.log('Email updated:', data))
.catch(error => console.error('Error:', error));

Dans cet exemple, seul le champ email est mis à jour. Le reste du profil reste intact.

Quand utiliser PATCH au lieu de PUT

Il existe des scénarios spécifiques où PATCH est plus approprié que PUT :

  1. Mise à jour de champs spécifiques : Si vous ne modifiez qu'une petite partie d'une ressource.
  2. Éviter la perte de données involontaire : Avec PUT, l'oubli d'un champ peut entraîner sa suppression par le serveur. PATCH évite ce risque.
  3. Considérations de performance : PATCH est plus efficace pour les ressources volumineuses.
  4. Mises à jour fréquentes : Dans les applications où les données changent souvent, PATCH facilite la modification de parties spécifiques.

Différences clés entre PUT et PATCH

CaractéristiquePUTPATCH
ObjectifRemplace l'intégralité de la ressource.Met à jour partiellement une ressource.
Gestion des donnéesNécessite l'envoi de toute la ressource.Envoie uniquement les champs à modifier.
EfficacitéMoins efficace pour les grandes ressources.Plus efficace pour les petites mises à jour.
IdempotenceIdempotent (même résultat si répété).Pas nécessairement idempotent.
Risque de pertePeut écraser des champs si les données sont manquantes.N'écrase pas les champs existants sauf si spécifié.

Méthode DELETE

La méthode DELETE est utilisée pour supprimer une ressource du serveur. Lorsqu'une requête DELETE est effectuée, le serveur supprime la ressource spécifiée, ce qui signifie qu'elle n'est plus accessible. Cette méthode est utilisée pour des tâches telles que la suppression d'un compte utilisateur ou le retrait d'un produit d'un catalogue.

Contrairement à GET ou POST, DELETE ne nécessite pas l'envoi d'un corps dans la requête – l'URL de la ressource à supprimer suffit généralement.

Comment fonctionne DELETE

Pour supprimer une ressource, il suffit généralement de fournir son URL.

Exemple :

fetch('https://example.com/posts/123', {
  method: 'DELETE'
})
.then(response => response.json())
.then(data => console.log('Resource deleted:', data))
.catch(error => console.error('Error:', error));

Ceci demande au serveur de supprimer l'article de blog ayant l'ID 123.

Utiliser DELETE en toute sécurité

Les requêtes DELETE peuvent avoir un impact important, il est donc crucial de les manipuler avec précaution :

  • Action permanente : Une fois traitée, la ressource est généralement perdue. Certains systèmes utilisent le "soft delete" (suppression logique), où la ressource est masquée mais pas effacée.
  • Authentification : Les requêtes DELETE doivent être restreintes aux utilisateurs autorisés.
  • Confirmation : De nombreuses applications demandent une confirmation avant de traiter une action DELETE.

Bonnes pratiques pour la gestion des requêtes DELETE

  1. Exiger l'authentification : Seuls les utilisateurs authentifiés doivent pouvoir effectuer des suppressions.
  2. Utiliser des étapes de confirmation : Pour les actions critiques.
  3. Journaliser les suppressions : Garder une trace de qui a supprimé quoi et quand.
  4. Soft Delete pour les données critiques : Permet de restaurer les données si nécessaire.
  5. Gérer les erreurs avec élégance : Renvoyer un code d'erreur approprié si la ressource n'existe pas.
  6. Vérifier l'URL cible : S'assurer que l'URL pointe vers la bonne ressource.
  7. Communiquer les résultats à l'utilisateur : Informer que la suppression a réussi.

Réponse DELETE

Typiquement, une requête DELETE réussie renvoie l'un des codes d'état suivants :

  • 200 OK : La suppression a réussi et inclut un corps de réponse.
  • 204 No Content : La requête a réussi, mais aucun contenu n'est renvoyé (très courant).
  • 404 Not Found : La ressource à supprimer n'existe pas.

Méthode HEAD

La méthode HEAD est similaire à la méthode GET mais avec une différence majeure : elle ne récupère que les en-têtes (headers) d'une ressource, pas son contenu réel.

Cela rend HEAD utile pour vérifier des informations sur une ressource, comme sa taille ou sa date de dernière modification, sans télécharger l'intégralité du contenu.

Comparaison entre HEAD et GET

  • Mêmes en-têtes, pas de contenu : La réponse contient les métadonnées (Content-Type, Content-Length, etc.) mais pas de corps.
  • Requêtes plus rapides : Comme aucun corps n'est inclus, elles consomment moins de bande passante.

Cas d'utilisation de HEAD

  1. Vérification de la disponibilité d'une ressource : Vérifier si une page existe (code 200 OK) sans la charger.
  2. Test de liens : Vérifier si des liens externes sont toujours valides.
  3. Récupération de métadonnées de fichiers : Vérifier la taille d'un fichier avant de le télécharger.
  4. Optimisation de la mise en cache : Vérifier si une ressource a été mise à jour via Last-Modified ou ETag.
  5. Efficacité des API : Vérifier l'existence d'un enregistrement.

Méthode OPTIONS

La méthode OPTIONS est utilisée pour déterminer quelles actions sont autorisées sur une ressource spécifique. Elle permet à un client de demander au serveur : "Quelles opérations puis-je effectuer sur cette ressource ?".

Récupération des méthodes supportées

Le serveur répond avec un en-tête Allow listant les méthodes HTTP supportées (ex: Allow: GET, POST, DELETE).

Exemple :

OPTIONS /api/resource HTTP/1.1
Host: example.com

Réponse du serveur :

HTTP/1.1 200 OK
Allow: GET, POST, DELETE

Utilisation de OPTIONS dans le CORS (Cross-Origin Resource Sharing)

L'une des utilisations les plus courantes de OPTIONS est la gestion du CORS.

CORS et requêtes Preflight

Lorsqu'un navigateur effectue une requête cross-origin, il envoie d'abord une requête OPTIONS, appelée requête de pré-vérification (preflight), pour vérifier si la requête réelle est autorisée par la politique CORS du serveur.

Méthode TRACE

La méthode TRACE est utilisée pour le débogage et pour tester comment les requêtes passent à travers les réseaux. Elle déclenche un "loopback" où le serveur renvoie exactement la requête qu'il a reçue. Cela permet de voir si des intermédiaires (proxies, firewalls) ont modifié la requête.

Risques de sécurité avec TRACE

TRACE est généralement considéré comme un risque de sécurité (attaques XSS, exposition de cookies) et est souvent désactivé sur les serveurs de production.

Méthode CONNECT

La méthode CONNECT est principalement utilisée pour établir un tunnel entre un client et un serveur via un intermédiaire, généralement un serveur proxy. Elle est cruciale pour sécuriser les connexions, notamment pour le trafic HTTPS passant par un proxy.

Comment fonctionne CONNECT

  1. Envoi d'une requête CONNECT : Le client demande au proxy de se connecter à un hôte et un port cible (souvent 443 pour le HTTPS).
  2. Établissement du tunnel : Le proxy crée une connexion directe vers la destination.
  3. Communication chiffrée : Une fois le tunnel établi, le client et le serveur communiquent via TLS. Le proxy ne peut pas déchiffrer les données.

Exemple de requête et réponse CONNECT :

  • Requête CONNECT :

      CONNECT example.com:443 HTTP/1.1
      Host: example.com
    
  • Réponse du Proxy :

      HTTP/1.1 200 Connection Established
    

Conclusion

Les méthodes HTTP sont essentielles pour permettre la communication entre les applications web et les serveurs. Chaque méthode, de GET à CONNECT, est conçue pour une tâche spécifique. Choisir la bonne méthode améliore l'efficacité et la sécurité de votre application.

GET est idéal pour la récupération, POST et PUT pour la création et la mise à jour, PATCH pour les modifications partielles et DELETE pour la suppression. HEAD vérifie les en-têtes, OPTIONS montre les méthodes supportées, et TRACE et CONNECT aident au débogage et aux connexions sécurisées.

Si vous avez des questions ou des suggestions, n'hésitez pas à me contacter sur LinkedIn. Si vous avez apprécié ce contenu, vous pouvez m'offrir un café pour soutenir la création de futurs contenus pour les développeurs.