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
Plus d'articles à lire
5 minutes de lecture
Encodage URL : quand s'échapper et quand casser des choses
URL encode et décode correctement — caractères réservés, plus contre %20, encodeURI contre encodeURIComponent et les bogues de double encodage derrière les liens rompus.
5 minutes de lecture
Base64 décoder et encoder : pour le transport, pas pour la
Base64 décode et encode dans le navigateur — la règle de taille 4/3, le remplissage, la variante base64url et le bug Unicode qui fait ressembler le texte décodé à des ordures.
6 minutes de lecture
Formateur JSON : joli, minifié et réellement valide
Un formateur JSON qui imprime, réduit et valide avec précision les emplacements d'erreur, ainsi que les cinq erreurs de syntaxe derrière presque toutes les erreurs JSON invalides.