Web & Kodierung · 5 Min. gelesen
cURL zum Abrufen: Verschieben einer Anfrage vom Terminal zum
Eine cURL-to-Fetch-Konvertierung ist der übliche Weg von der Dokumentation eines API zum funktionierenden Frontend-Code: Der schnellste Weg, einen API zu verstehen, ist ein cURL-Befehl, der aus seinen Dokumenten kopiert wird, und der schnellste Weg, ihn zu versenden, ist `fetch`. Die Konvertierung zwischen ihnen erfolgt größtenteils mechanisch – Flags werden einem Optionsobjekt zugeordnet –, aber zwei Dinge unterbrechen die Übersetzung regelmäßig: Body-Codierungen und das Browser-Sicherheitsmodell, das in einem Terminal kein Äquivalent hat.
Aktualisiert
Wie die Flaggen abgebildet sind
- `-X POST` → `method: "POST"` (oder leiten Sie die Methode aus `-d` ab).
- `-H "Content-Type: application/json"` → ein Eintrag in `headers`.
- `-d '{"a":1}'` → `body: JSON.stringify(...)`; cURL sendet es formcodiert, sofern Sie nichts anderes angeben.
- `--data-binary @file` → ein `Blob`-, `FormData`- oder `ArrayBuffer`-Körper anstelle einer Zeichenfolge.
- `-u user:pass` → ein `Authorization: Basic …`-Header, der aus der Basis 64 von `user:pass` aufgebaut ist.
- `-F name=@file` → `FormData` mit einem `File`, so werden Datei-Uploads ausgedrückt.
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: Der Teil, über den cURL nie nachdenken musste
cURL läuft außerhalb des Sicherheitsmodells des Browsers und kann daher jeden Host aufrufen, der antwortet. `fetch` auf einer Seite ist an CORS gebunden: Der Server muss Ihren Ursprung zulassen und für alles, was über einfache Anfragen hinausgeht, muss er auch einen Preflight `OPTIONS` korrekt beantworten. Ein konvertierter Befehl, der im Terminal perfekt funktioniert, kann aus genau diesem Grund im Browser mit einem undurchsichtigen Netzwerkfehler fehlschlagen – und keine noch so große Bearbeitung des Headers in der Anfrage kann das Problem beheben, da die Berechtigung vom Server kommen muss.
Wenn ein Abruf mit einer CORS-Nachricht fehlschlägt, liegt der Fix auf dem API oder auf Ihrem Proxy – nicht im JavaScript. Umgehen Sie es niemals, indem Sie einen API-Schlüssel in den Client-Code einfügen, um das Problem zu „vermeiden“.
Anmeldeinformationen, Weiterleitungen und Streaming
Zwei weitere Verhaltensweisen unterscheiden sich vom Terminal. Cookies werden nur gesendet, wenn Sie `credentials: "include"` übergeben, und der Server muss mit einem expliziten Ursprung und nicht mit einem Platzhalter antworten. Auf Weiterleitungen folgt standardmäßig `redirect: "follow"`, aber bei einer Weiterleitung geht der `Authorization`-Header über die Ursprünge hinweg verloren, es sei denn, der Server verarbeitet ihn, weshalb authentifizierte Aufrufe oft `redirect: "manual"` und eine absichtliche Folge erfordern. Streaming-Antworten werden von `response.body` als `ReadableStream` gelesen, wobei cURL einfach beim Empfang ausgibt.
Holen oder Axios?
`fetch` ist eingebaut und funktioniert überall modern; axios bietet zusätzlichen Komfort – automatisches JSON-Parsing, Interceptors, ein lesbarer Fehler für Nicht-2xx-Antworten, Upload-Fortschritt in älteren Laufzeiten. Ein konvertierter cURL-Befehl ist ein zuverlässiger Ausgangspunkt für beides: Einfügen der generierten Optionen in einen Axios-Aufruf und Übernehmen der Header und des Textkörpers unverändert.
Konvertieren ohne auszulaufen
Von echten Sitzungen kopierte cURL-Befehle enthalten normalerweise Live-Bearer-Token, API-Schlüssel oder Sitzungscookies. Bei einer im Browser ausgeführten Konvertierung bleiben diese Anmeldeinformationen auf Ihrem Computer erhalten. Dies ist die einzig sinnvolle Möglichkeit, mit einer Anfrage zu arbeiten, die Sie nicht selbst eingegeben haben.
cURL zum Abrufen – häufig gestellte Fragen
Warum schlägt meine konvertierte Abrufanforderung mit einem CORS-Fehler fehl?
Weil der Browser die Same-Origin-Richtlinie erzwingt, cURL jedoch nicht. Der API muss den entsprechenden `Access-Control-Allow-Origin`-Header senden und Preflight-Anfragen bearbeiten. Das Proxying über Ihr eigenes Backend ist die Standardlösung, wenn ein Drittanbieter API keine Browser-Ursprünge zulässt.
Wie sende ich Formulardaten mit fetch statt mit JSON?
Verwenden Sie ein `FormData`-Objekt als Körper und lassen Sie den Browser die Multipart-Grenze festlegen – legen Sie `Content-Type` nicht selbst fest, da der Wert ein vom Browser generiertes Grenztoken enthält. Dies gilt auch für Datei-Uploads von `-F`-Flags.
Sendet Fetch standardmäßig Cookies?
Nein. Same-Origin-Anfragen enthalten Cookies, wenn `credentials: "same-origin"` gilt, aber Cross-Origin-Aufrufe benötigen `credentials: "include"`, und der Server muss mit einem expliziten Ursprung statt mit einem Platzhalter antworten, damit die Antwort gelesen werden kann.
In diesem Beitrag erwähnte Tools
Weitere Artikel zum Lesen
5 Min. gelesen
URL-Kodierung: Wann man fliehen muss und wann man Dinge kaputt
URL korrekt kodieren und dekodieren – reservierte Zeichen plus im Vergleich zu %20, encodeURI im Vergleich zu encodeURIComponent und die Doppelkodierungsfehler hinter defekten Links.
5 Min. gelesen
Base64 dekodieren und kodieren: für den Transport, nicht für
Base64 im Browser dekodieren und kodieren – die 4/3-Größenregel, Auffüllung, die Base64URL-Variante und der Unicode-Fehler, der dekodierten Text wie Müll aussehen lässt.
6 Min. gelesen
JSON Formatierer: hübsch, minimiert und tatsächlich gültig
Ein JSON-Formatierer, der mit genauen Fehlerpositionen schön druckt, minimiert und validiert – plus die fünf Syntaxfehler, die fast jedem ungültigen JSON-Fehler zugrunde liegen.