So konvertieren Sie cURL-Befehle in JavaScript fetch・Python requests｜DevTools-Integration

Eine häufige Aufgabe beim API-Debugging ist 「den cURL-Befehl aus Chrome DevTools direkt in Code zu übernehmen」. Dieser Artikel erläutert <strong>das cURL-Optionssystem</strong>, die Funktionsweise der Funktion 「Copy as cURL」 in DevTools und Konvertierungsmuster für Hauptsprachen (JavaScript fetch / axios / Python requests / PHP cURL / Go net/http). Mit dem am Ende vorgestellten <a href="/ja/tools/curl/">cURL-Konvertierungstool</a> können Sie diese mit einem einfachen Copy-Paste konvertieren.

Warum cURL als Ausgangspunkt verwenden

Bei der Implementierung und dem Debuggen von APIs ist es üblich, zunächst mit curl zu prüfen, ob es funktioniert, bevor der Code geschrieben wird. Die Gründe sind folgende:

• <strong>Sprachunabhängig</strong>: curl ist eine universelle Sprache, die in fast jeder Umgebung funktioniert
• <strong>Sofort aus DevTools kopieren</strong>: Klicken Sie mit der rechten Maustaste auf eine Anfrage in der Registerkarte 「Netzwerk」 von Chrome / Firefox / Safari → Copy as cURL, um den vollständigen Reproduktionsbefehl zu erhalten
• <strong>Reproduzierbarkeit sicherstellen</strong>: Durch Anfügen von <code>curl</code>-Befehlen in Fehlermeldungen oder Stack-Overflow-Fragen können andere dieselbe Anfrage ohne Umgebungsunterschiede testen

Wichtige cURL-Optionen

Die minimalen cURL-Optionen, die Sie kennen sollten, sind wie folgt.

Was Sie mit 「Copy as cURL」 in DevTools erhalten

Öffnen Sie den Reiter Network in Chrome / Firefox / Edge und klicken Sie mit der rechten Maustaste auf eine beliebige Anfrage. Es gibt ein Menü <strong>Copy → Copy as cURL</strong>. Wenn Sie darauf klicken, wird ein Befehl, der das Folgende vollständig reproduziert, in die Zwischenablage kopiert.

• HTTP-Methode und vollständige URL
• Alle gesendeten Request-Header (<code>Authorization</code> / <code>User-Agent</code> / <code>Accept</code> / <code>Cookie</code> usw.)
• Request-Body (JSON / form-data / binary)
• Escape durch ANSI-C-Quoting (<code>$'...'</code>)

Zu beachten ist, dass Firefox「Copy as cURL」<code>--data-raw</code> verwendet, während Chrome <code>--data-binary</code> nutzt und es weitere subtile Unterschiede gibt. Die Implementierung des Konvertierungstools muss beide Varianten erkennen können.

Konvertierung zu JavaScript fetch

Ich zeige ein typisches Beispiel für die JSON POST-Konvertierung.

# 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);

axios-Version

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));

Konvertierung zu 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())

Der wichtige Punkt ist, <code>json=</code> statt <code>data=</code> zu verwenden. Wenn <code>json=</code> angegeben wird, serialisiert requests JSON automatisch und setzt auch automatisch den Content-Type.

Konvertierung zu 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;

Konvertierung zu 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))
}

Achtung: Tokens müssen niemals hardcodiert werden

Wenn Sie cURL-Befehle in Code umwandeln, achten Sie darauf, <strong>die Werte des Authorization-Headers (Bearer-Token oder API-Schlüssel) nicht direkt in den Code zu schreiben und zu committen</strong>.

• Lesen Sie Produktions-Token über Umgebungsvariablen (<code>process.env.API_TOKEN</code> / <code>os.environ['API_TOKEN']</code> / <code>getenv()</code>)
• Vor dem Commit mit <code>git diff</code> überprüfen, ob keine geheimen Informationen vermischt sind
• Falls bereits <code>commit</code> durchgeführt wurde, deaktivieren Sie das Token sofort (Rotation) und schreiben Sie die Historie um (<code>git filter-repo</code>)

cURL-Konvertierungstool von DevLab

<a href="/ja/tools/curl/">DevLab-Tool zur Konvertierung von cURL ⇄ fetch / axios</a> führt alle obigen Konvertierungen <strong>vollständig im Browser</strong> mit einem Klick durch. Unterstützt 13 verschiedene Zieltypen:

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

Die cURL-seitigen Optionen <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> und ANSI-C-Quoting <code>$'...'</code> werden unterstützt und akzeptieren die Ausgabe 「Copy as cURL」 von Chrome und Firefox direkt.

Zusammenfassung

cURL ist äußerst praktisch als sprachunabhängige gemeinsame Sprache zur HTTP-Reproduktion, und in Kombination mit DevTools können Sie laufende API-Anfragen sofort reproduzieren. Wenn Sie die in diesem Artikel gezeigten Konvertierungsmuster beherrschen, können Sie das gleiche Verhalten in jeder Sprache reproduzieren. Manuelle Konvertierung ist anfällig für Fehler und Auslassungen (besonders Content-Type und Escape von Anführungszeichen), daher empfehlen wir dringend die Verwendung von automatisierter Konvertierung mit Tools.