Cómo convertir comandos cURL a JavaScript fetch y Python requests｜Integración con DevTools

Una tarea común en la depuración de API es "tomar un comando cURL de Chrome DevTools y convertirlo directamente al código". Este artículo explica <strong>la estructura de opciones de cURL</strong>, cómo funciona la función "Copy as cURL" de DevTools y patrones de conversión a lenguajes principales (JavaScript fetch / axios / Python requests / PHP cURL / Go net/http). Usando la <a href="/ja/tools/curl/">herramienta de conversión de cURL</a> introducida al final, puede convertir estos con un simple copiar-pegar.

Por qué empezar con cURL

Al implementar y depurar API, el flujo de trabajo común es primero 「verificar que funcione con curl antes de escribir código」. Las razones son las siguientes:

• <strong>Independiente del lenguaje</strong>: curl es un lenguaje universal disponible en casi cualquier entorno
• <strong>Copiar directamente desde DevTools</strong>: En la pestaña Network de Chrome / Firefox / Safari, haz clic derecho en una solicitud → Copy as cURL para obtener un comando completamente reproducible
• <strong>Garantía de reproducibilidad</strong>: Al adjuntar un comando curl en reportes de errores o preguntas de Stack Overflow, otros pueden reproducir la solicitud exacta independientemente del entorno

Opciones principales de cURL

Las opciones esenciales de cURL se enumeran a continuación.

Qué obtienes del "Copy as cURL" de DevTools

Abra la pestaña Network en Chrome / Firefox / Edge, haga clic derecho en cualquier solicitud y verá la opción de menú <strong>Copy → Copy as cURL</strong>. Al hacer clic, se copia un comando completamente reproducido al portapapeles.

• Método HTTP y URL Completa
• Todos los encabezados de solicitud enviados (Authorization / User-Agent / Accept / Cookie, etc.)
• Cuerpo de la solicitud (JSON / form-data / binary)
• Escape mediante ANSI-C quoting (<code>$'...'</code>)

Como punto a tener en cuenta, "Copy as cURL" de Firefox utiliza <code>--data-raw</code>, mientras que Chrome utiliza <code>--data-binary</code>, entre otras diferencias sutiles. Su herramienta de conversión debe estar implementada para reconocer ambos formatos.

Convertir a JavaScript fetch

Aquí hay un ejemplo de una conversión típica de JSON POST.

# cURL
curl -X POST https://api.example.com/users \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer YOUR_TOKEN' \
  -d '{"name":"Alice","email":"alice@example.com"}'

// JavaScript fetch
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN',
  },
  body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' }),
})
  .then(r => r.json())
  .then(console.log);

Versión de axios

import axios from 'axios';

axios.post(
  'https://api.example.com/users',
  { name: 'Alice', email: 'alice@example.com' },
  { headers: { 'Authorization': 'Bearer YOUR_TOKEN' } }
).then(r => console.log(r.data));

Convertir a Python requests

import requests

response = requests.post(
    'https://api.example.com/users',
    headers={
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_TOKEN',
    },
    json={'name': 'Alice', 'email': 'alice@example.com'},
)
print(response.json())

La clave es usar <code>json=</code> en lugar de <code>data=</code>. Cuando especificas <code>json=</code>, requests serializa automáticamente a JSON y establece el Content-Type automáticamente.

Convertir a PHP cURL

<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.example.com/users');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json',
    'Authorization: Bearer YOUR_TOKEN',
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode([
    'name'  => 'Alice',
    'email' => 'alice@example.com',
]));

$response = curl_exec($ch);
curl_close($ch);
echo $response;

Conversión a Go net/http

package main

import (
    "bytes"
    "io"
    "net/http"
)

func main() {
    body := bytes.NewReader([]byte(`{"name":"Alice","email":"alice@example.com"}`))
    req, _ := http.NewRequest("POST", "https://api.example.com/users", body)
    req.Header.Set("Content-Type", "application/json")
    req.Header.Set("Authorization", "Bearer YOUR_TOKEN")

    res, _ := http.DefaultClient.Do(req)
    defer res.Body.Close()
    data, _ := io.ReadAll(res.Body)
    println(string(data))
}

Advertencia: El hardcoding de tokens está estrictamente prohibido

Al convertir comandos cURL a código, tenga cuidado de <strong>no escribir directamente los valores del encabezado Authorization (tokens Bearer o claves API) en el código y hacer commit</strong>.

• Leer tokens de producción a través de variables de entorno (<code>process.env.API_TOKEN</code> / <code>os.environ['API_TOKEN']</code> / <code>getenv()</code>)
• Antes de confirmar, verifique con <code>git diff</code> que no haya información secreta incluida
• Si ya fue confirmado, invalide el token inmediatamente (rotation) y reescriba el historial (git filter-repo)

Herramienta de conversión cURL de DevLab

<a href="/ja/tools/curl/">La herramienta de conversión cURL ⇄ fetch / axios de DevLab</a> ejecuta todas las conversiones anteriores con un solo clic, <strong>completamente en el navegador</strong>. Soporta 13 formatos de destino diferentes:

• JavaScript: fetch / axios / node-fetch / https estándar de Node.js
• Python: requests / urllib
• PHP: cURL / file_get_contents
• Go: net/http
• Rust: reqwest
• wget / HTTPie / PowerShell Invoke-WebRequest

Las opciones de cURL admiten <code>-X</code> <code>-H</code> <code>-d</code> <code>--data-raw</code> <code>--data-binary</code> <code>--data-urlencode</code> <code>-F</code> <code>-u</code> <code>-b</code> <code>-A</code> <code>-e</code> <code>-L</code> <code>-k</code> <code>-I</code> y ANSI-C quoting <code>$'...'</code>, y aceptan la salida "Copy as cURL" de Chrome y Firefox directamente.

Resumen

cURL es extremadamente conveniente como lenguaje común de reproducción HTTP independiente del lenguaje, y cuando se combina con DevTools, permite reproducir inmediatamente solicitudes de API en producción. Si dominas los patrones de conversión mostrados en este artículo, puedes reproducir el mismo comportamiento desde cualquier idioma. La conversión manual es propensa a errores y omisiones (especialmente con Content-Type y escapes de comillas), por lo que recomiendo firmemente usar herramientas de conversión automática.