YamlBox

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

Durchsuchen Sie die vollständige Liste der 19-Tools

Weitere Artikel zum Lesen

Alle 19 Beiträge →