YamlBox

Web et encodage · 5 minutes de lecture

cURL à récupérer : déplacer une requête du terminal vers le

Une conversion cURL pour récupérer est le chemin habituel depuis la documentation d'un API jusqu'au code frontal fonctionnel : le moyen le plus rapide de comprendre un API est une commande cURL copiée à partir de sa documentation, et le moyen le plus rapide de l'expédier est `fetch`. La conversion entre eux est principalement mécanique – les drapeaux sont mappés sur un objet d'options – mais deux choses interrompent régulièrement la traduction : les encodages du corps et le modèle de sécurité du navigateur qui n'a pas d'équivalent dans un terminal.

Mis à jour

Comment les drapeaux sont-ils cartographiés

  • `-X POST` → `method: "POST"` (ou déduire la méthode à partir de `-d`).
  • `-H "Content-Type: application/json"` → une entrée en `headers`.
  • `-d '{"a":1}'` → `body: JSON.stringify(...)` ; cURL l'envoie sous forme codée, sauf indication contraire de votre part.
  • `--data-binary @file` → un corps `Blob`, `FormData` ou `ArrayBuffer` plutôt qu'une chaîne.
  • `-u user:pass` → un en-tête `Authorization: Basic …` construit à partir de la base64 de `user:pass`.
  • `-F name=@file` → `FormData` avec un `File`, c'est ainsi que les téléchargements de fichiers sont exprimés.
                await fetch('https://api.example.com/v1/orders', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer ' + token,
  },
  body: JSON.stringify({ sku: 'YB-1', qty: 2 }),
});
              

CORS : la pièce à laquelle CURL n'a jamais eu à penser

cURL s'exécute en dehors du modèle de sécurité du navigateur, il peut donc appeler n'importe quel hôte qui répond. `fetch` dans une page est lié par CORS : le serveur doit autoriser votre origine, et pour tout ce qui va au-delà des simples requêtes, il doit également répondre correctement à un contrôle en amont `OPTIONS`. Une commande convertie qui fonctionne parfaitement dans le terminal peut échouer dans le navigateur avec une erreur réseau opaque pour exactement cette raison - et aucune modification de l'en-tête dans la requête ne la corrigera, car l'autorisation doit provenir du serveur.

Si une récupération échoue avec un message CORS, le correctif se trouve sur le API ou sur votre proxy – pas dans JavaScript. Ne contournez jamais ce problème en mettant une touche API dans le code client pour « éviter » le problème.

Identifiants, redirections et streaming

Deux autres comportements diffèrent du terminal. Les cookies ne sont envoyés que si vous transmettez `credentials: "include"`, et le serveur doit répondre avec une origine explicite plutôt qu'un caractère générique. Les redirections sont suivies par défaut de `redirect: "follow"`, mais une redirection perd l'en-tête `Authorization` entre les origines à moins que le serveur ne le gère, c'est pourquoi les appels authentifiés nécessitent souvent `redirect: "manual"` et un suivi délibéré. Les réponses en streaming sont lues à partir de `response.body` comme un `ReadableStream`, où cURL s'imprime simplement au fur et à mesure qu'il reçoit.

Récupérer ou axios ?

`fetch` est intégré et fonctionne partout de manière moderne ; axios ajoute de la commodité : analyse automatique JSON, intercepteurs, erreur lisible pour les réponses non-2xx, progression du téléchargement dans les anciens environnements d'exécution. Une commande cURL convertie est un point de départ fiable pour : coller les options générées dans un appel axios et les en-têtes et le corps restent inchangés.

Convertissez sans fuite

Les commandes cURL copiées à partir de sessions réelles contiennent généralement des jetons de porteur en direct, des clés API ou des cookies de session. Une conversion exécutée dans le navigateur conserve ces informations d'identification sur votre ordinateur, ce qui constitue le seul moyen sensé de travailler avec une requête que vous n'avez pas saisie vous-même.

cURL à récupérer — questions fréquemment posées

Pourquoi ma demande de récupération convertie échoue-t-elle avec une erreur CORS ?

Parce que le navigateur applique la politique de même origine, contrairement à cURL. Le API doit envoyer l’en-tête `Access-Control-Allow-Origin` approprié et gérer les demandes de contrôle en amont. Le proxy via votre propre backend est la solution standard lorsqu'un API tiers n'autorise pas les origines du navigateur.

Comment puis-je envoyer des données de formulaire avec fetch au lieu de JSON ?

Utilisez un objet `FormData` comme corps et laissez le navigateur définir la limite en plusieurs parties — ne définissez pas `Content-Type` vous-même, car la valeur inclut un jeton de limite généré par le navigateur. Cela couvre également les téléchargements de fichiers à partir de `-F` flags.

Est-ce que fetch envoie des cookies par défaut ?

Non. Les requêtes de même origine incluent les cookies lorsque `credentials: "same-origin"` s'applique, mais les appels d'origine croisée nécessitent `credentials: "include"`, et le serveur doit répondre avec une origine explicite plutôt qu'un caractère générique pour permettre la lecture de la réponse.

Outils mentionnés dans cet article

Parcourez la liste complète des 19 outils

Plus d'articles à lire

Tous les 19 messages →