cURL zu Fetch Konverter (JS & Node)

cURL zu Fetch Konverter (JS & Node)

cURL-Befehle sofort in moderne Fetch-API-Syntax umwandeln. HTTP-Header, Auth-Tokens, Cookies und JSON-Payloads in asynchronen JavaScript-Code parsen.

Schnellvorlagen
cURL-Befehlseingabe
Code-Variante & Framework
Request-Timeout (Millisekunden)10,000 ms
/**
 * Generated by ToolsAA cURL to Fetch Engine (ES2022 async/await)
 * Zero external dependencies. 100% Client-Side Executed.
 */
async function executeRequest() {
  const url = 'https://api.stripe.com/v1/payment_intents';

  const body = new URLSearchParams({
    'amount': '2000',
    'currency': 'usd',
    'payment_method_types[]': 'card',
  });

  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 10000);

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Basic ' + (typeof window !== 'undefined' ? btoa('sk_test_51MzEXAMPLESECRETKEY:') : Buffer.from('sk_test_51MzEXAMPLESECRETKEY:').toString('base64')),
      },
    body,
    credentials: 'include',
      signal: controller.signal,
    });

    clearTimeout(timeoutId);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status} ${response.statusText}`);
    }

    // Automatic MIME response parser
    const contentType = response.headers.get('content-type') || '';
    if (contentType.includes('application/json')) {
      const data = await response.json();
      return data;
    }

    return await response.text();
  } catch (error) {
    clearTimeout(timeoutId);
    if ((error as any)?.name === 'AbortError') {
      console.error('Request timed out after 10000ms');
    }
    throw error;
  }
}

// Call request
executeRequest()
  .then(data => console.log('Response Payload:', data))
  .catch(err => console.error('Fetch Execution Failed:', err));

Kompilierungspipeline: cURL zu AST zu Fetch

Tokens: 12•HTTP-Header: 1•Architektur-Sicherheitsbewertung 76%•BROWSER
1. Lexikalische AnalyseShell-Argumente lexikalisch parsen12 Tokens erkannt (220 Zeichen)2. Header & Auth-ExtraktionAuthentifizierung aktiv • SSL/TLS-Verschlüsselung verifiziertPOST1 HTTP-Header3. Body-Typisierung & SerialisierungURLENCODED Payload-Vorschau52 B (Body)4. Code-Synthese (Fetch / Axios)76%BROWSER55 Zeilen (10000ms)
HauptmetrikRFC 9110 DFA
HTTP-MethodePOST
Header gesamt1
Payload-FormatURLENCODED
Effizienz & Kapazität0 Byte Serverübertragung (100% Client-seitig)
Netto-AusgabeBROWSER
Technische Referenz & Architektur-Leitfaden

cURL zu Fetch Konverter (JS & Node) — Referenzhandbuch

cURL-Befehle blitzschnell in Fetch-API-Syntax umwandeln. HTTP-Header, Auth-Tokens, Cookies und JSON-Payloads präzise in modernen async/await JavaScript-Code parsen.

cURL zu Fetch Konverter (JS & Node) — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss
cURL zu Fetch Konverter (JS & Node) — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss

Wichtige Parameter & Einstellungen

cURL-CLI-BefehlszeilePOSIX-Shell-Befehl (Bash / Zsh)

Unformatierter Terminal-Befehlsaufruf beginnend mit 'curl'. Unterstützt mehrzeilige Backslash-Zeilenumbrüche, einfaches und doppeltes Shell-Quoting sowie standardisierte POSIX-Flag-Konventionen.

Standard: curl -X GET 'https://api.example.com/data'
Ziel-Laufzeitumgebung & Framework-SyntaxJavaScript- / TypeScript-Zieldialekt

Definiert das Format der Code-Ausgabe: Standard Browser-ES2022 mit async/await, typsicheres TypeScript mit ApiResponse-Generics, Node.js 18+ Server-Syntax mit AbortSignal, Next.js App Router mit Caching-Tags oder Axios-Client-Syntax.

Standard: browser
HTTP-Methodenauflösung (-X / --request)RFC 9110 HTTP-Verb (GET, POST, PUT, DELETE, PATCH, HEAD)

HTTP-Anfragemethode. Wird -X weggelassen, verwendet cURL standardmäßig GET, es sei denn, Parameter für den Request-Body (-d, --data, -F) sind vorhanden, wodurch die Standardmethode implizit auf POST wechselt.

Standard: GET
HTTP-Request-Header (-H / --header)HTTP-Header-Schlüssel-Wert-Paare

Benutzerdefinierte Metadaten-Header der Anfrage. Browser-Implementierungen von fetch erzwingen Beschränkungen für verbotene Header (z. B. können Host, Content-Length oder Cookie zur Sicherheitsisolation nicht manuell per Headers-API überschrieben werden).

Standard: Content-Type: application/json
Nutzdaten-Body (-d / --data / -F)HTTP-Request-Body-Entität

Bei POST-, PUT- oder PATCH-Anfragen übertragene Nutzdaten. Werden dynamisch in JSON.stringify() für JSON-Strings, URLSearchParams() für application/x-www-form-urlencoded oder FormData() für Multipart-Uploads geparst.

Standard: {}
Basic- & Bearer-Authentifizierung (-u / Bearer)Autorisierungs-Anmeldeinformation

Zugangsdaten zur Authentifizierung. cURL -u user:pass wird zu 'Authorization: Basic <base64>' zusammengesetzt, während -H 'Authorization: Bearer <token>' in strukturierte Variablen mit optionaler Schwärzungsmaske extrahiert wird.

Standard: Bearer <TOKEN>

Profi-Tipps & Best Practices

Fetch bricht bei HTTP 4xx oder 5xx nicht ab (Die response.ok-Falle)

Anders als die cURL-CLI (die Fehler-Statuscodes im Terminal ausgibt) oder Axios (das Promises bei 4xx/5xx-Antworten verwirft), schlägt das native JavaScript Fetch API nur bei echten Netzwerkfehlern oder CORS-Blockaden fehl. Ein Status 404 Not Found, 401 Unauthorized oder 500 Internal Server Error löst das Promise weiterhin erfolgreich auf. Prüfen Sie daher stets explizit 'if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);', bevor Sie response.json() oder response.text() aufrufen.

Content-Type bei Multipart/Form-Data in Fetch niemals manuell setzen

Wenn Sie cURL-Uploads mit -F ('--form') in Fetch konvertieren, setzen Sie keinesfalls manuell den Header 'Content-Type: multipart/form-data'. Andernfalls wird der dynamische Boundary-Parameter (z. B. 'boundary=----WebKitFormBoundary...') entfernt, den der Browser automatisch generiert, um die Segmente der Nutzdaten abzugrenzen. Übergeben Sie stattdessen einfach die FormData-Instanz direkt an die body-Option – der Browser berechnet den korrekten Content-Type samt Boundary-Trennzeichen vollautomatisch.

Fallstricke bei cURL -d: Formulardaten vs. JSON-Serialisierung

Wird in cURL -d ohne expliziten Content-Type-Header übergeben, greift standardmäßig 'application/x-www-form-urlencoded' und nicht JSON. Viele Entwickler wrappen -d 'key=val&foo=bar' irrtümlich in JSON.stringify(). Prüfen Sie immer, ob es sich um Schlüssel-Wert-Paare handelt (hierfür 'new URLSearchParams({ key: 'val', foo: 'bar' })' nutzen) oder um valides JSON (erfordert 'JSON.stringify(data)' und einen expliziten Header 'Content-Type: application/json').

Verbotene Browser-Header vs. Fähigkeiten des cURL-Terminals

Im Terminal kann cURL jeden beliebigen HTTP-Header fälschen, einschließlich 'Cookie', 'User-Agent', 'Referer' und 'Host'. In browserseitigem JavaScript definiert die W3C-Fetch-Spezifikation diese jedoch als 'Forbidden Header Names', um Cross-Site-Request-Forgery (CSRF) und Session-Hijacking zu unterbinden. Manuelle 'Cookie'-Header werden von Browser-Fetch stillschweigend ignoriert. Übergeben Sie stattdessen 'credentials: "include"' (oder 'same-origin'), damit der browserinterne Cookie-Jar Sitzungstokens automatisch anhängt.

Häufige Fehlerquellen & Fehlerbehebung

⚠️TypeError: Failed to Fetch (CORS-Fehler im Browser, während cURL im Terminal funktioniert)

cURL ist ein reines Kommandozeilen-Tool ohne Browser-Sandbox und unterliegt nicht der Same-Origin Policy (SOP). Wird fetch() im clientseitigen Browser-JavaScript gegen eine Drittanbieter-API ausgeführt, die keinen 'Access-Control-Allow-Origin: *'-Header zurückgibt, blockiert der Browser die Antwort. Rufen Sie die API stattdessen über ein Backend auf (Node.js, Next.js Route Handler oder Cloudflare Worker), wo keine CORS-Einschränkungen greifen, oder konfigurieren Sie entsprechende CORS-Header auf dem Zielserver.

⚠️Unexpected Token in JSON at Position 0 beim Parsen der Antwort

Dieser Fehler tritt auf, wenn 'await response.json()' auf einen API-Endpunkt angewendet wird, der einen leeren Body (z. B. 204 No Content), eine HTML-Fehlerseite (etwa Cloudflare 502 Bad Gateway) oder reinen Text zurückgibt. Prüfen Sie vor dem Aufruf von response.json() stets, ob 'response.headers.get('content-type')?.includes('application/json')' zutrifft, oder lesen Sie die Antwort mit 'const text = await response.text()' aus und verwenden Sie ein sicheres JSON.parse() in einem try-catch-Block.

⚠️Multipart-Form-Upload schlägt auf dem Backend-Server mit 'No Boundary Found' fehl

Dies geschieht, wenn der Header 'Content-Type: multipart/form-data' im headers-Objekt von fetch explizit deklariert wurde. Entfernen Sie den 'Content-Type'-Header bei Verwendung von FormData() vollständig aus den Headern. Der Browser oder die Node.js-Runtime injiziert dann automatisch den vollständigen Wert 'multipart/form-data; boundary=----WebKitFormBoundary...' inklusive der exakt berechneten Multipart-Trennlinie.

⚠️cURL-Befehl mit Backslash-Zeilenumbrüchen lässt sich nicht parsen

Werden mehrzeilige cURL-Befehle aus Bash-Skripten oder Dokumentationen kopiert, führen nachfolgende Leerzeichen nach dem Backslash ('\ ') dazu, dass Shells und Parser den Zeilenumbruch als Literaltext anstatt als Fortsetzungszeichen interpretieren. Unser Parser normalisiert '\ '- und '\ '-Token automatisch, entfernt überflüssige Leerzeichen und führt mehrzeilige Terminal-Ausschnitte zu einer zusammenhängenden Argumentkette zusammen.

Häufig gestellte Fragen (FAQ)

Wie wandelt man einen cURL-Befehl in JavaScript-Fetch-Code um?▼

Um cURL in Fetch umzuwandeln, extrahieren Sie die Ziel-URL aus der Befehlszeile, bilden -X auf das 'method'-Attribut ab (GET, POST, PUT, DELETE), konvertieren jedes -H-Argument in Schlüssel-Wert-Paare innerhalb des 'headers'-Objekts, formatieren -d- oder --data-Payloads in 'JSON.stringify(payload)' bzw. 'new URLSearchParams(payload)' für das 'body'-Attribut und betten den Aufruf in eine 'async/await'-Funktion mit 'const response = await fetch(url, options)' ein.

Warum funktioniert ein cURL-Request im Terminal, schlägt in Fetch jedoch mit einem CORS-Fehler fehl?▼

cURL agiert als direkter HTTP-Client ohne Browser-Sicherheits-Sandbox und ignoriert Richtlinien wie die Same-Origin Policy oder Cross-Origin Resource Sharing (CORS). Moderne Webbrowser setzen CORS strikt durch, um zu verhindern, dass fremde Webanwendungen unbefugt sensible Daten domänenübergreifend auslesen. Sendet der Zielserver keinen zu Ihrer Origin passenden 'Access-Control-Allow-Origin'-Header, bricht der Browser den fetch-Aufruf ab. Leiten Sie die Anfrage zur Behebung über ein Backend oder eine Serverless API Route weiter.

Wie implementiert man cURL Basic Auth (-u benutzer:passwort) in JavaScript Fetch?▼

In cURL sendet '-u benutzer:passwort' eine HTTP-Basic-Authentication. Im modernen Browser-JavaScript kodieren Sie die Zugangsdaten per Base64 mittels 'btoa("benutzer:passwort")' und übergeben sie als 'headers: { Authorization: `Basic ${btoa("benutzer:passwort")}` }'. In Node.js verwenden Sie 'Buffer.from("benutzer:passwort").toString("base64")' für denselben standardisierten Header-Wert.

Wie sendet man Cookies in der Fetch API analog zu cURL -b Cookie-String?▼

Im Browser-JavaScript ist 'Cookie' ein geschützter Header (Forbidden Header Name), der aus Sicherheitsgründen nicht manuell in fetch()-Headern gesetzt werden darf. Um für die Zieldomäne gespeicherte Browser-Cookies mitzusenden, setzen Sie im Options-Objekt 'credentials: "include"'. In serverseitigen Node.js-Umgebungen (in denen keine Browser-Sicherheitsbeschränkungen gelten) können Sie 'Cookie: session_id=xyz' direkt als regulären Header übergeben.

Was ist der Unterschied zwischen cURL -d, --data-raw und --data-urlencode in Fetch?▼

In cURL übertragen '-d' und '--data-raw' den exakten String und verwenden standardmäßig den Content-Type 'application/x-www-form-urlencoded', sofern dieser nicht per -H überschrieben wird. Handelt es sich um JSON, müssen die Daten in Fetch per JSON.stringify() serialisiert und mit 'Content-Type: application/json' versehen werden. Bei '--data-urlencode' werden Parameterwerte vor dem Senden URL-kodiert; dies entspricht in Fetch der nativen Übergabe von Schlüssel-Wert-Paaren an 'new URLSearchParams({ key: value }).toString()'.

Verwandte Tools & Hilfsprogramme

Alle Tools →