All lessons T
API Debugging intermediate 12 min

Turn a cURL Command Into Client Code

Convert a working command-line request into fetch or Axios code without losing headers or body data.

Scenario

The API docs prove the endpoint works with a curl one-liner, and now the frontend needs the same request as fetch or axios code. Rebuilding it by hand is where requests quietly diverge: the method gets dropped (fetch defaults to GET), the Content-Type header gets forgotten (so the body arrives as text), or shell quoting leaks into the JSON. Converting mechanically keeps the working request working.

Broken input

curl -X POST https://api.example.test/users -H 'Content-Type: application/json' -d '{"name":"Ada"}'

Goal

Use cURL to fetch / Axios to generate client code that preserves all four request ingredients — method, URL, headers, body — exactly as the known-good curl command sends them.

Tool sequence

  1. Open cURL to fetch / Axios.
  2. Paste the entire curl command, flags and quotes included — -X POST, -H, and -d each map to a distinct part of the generated code.
  3. Pick fetch or axios to match the codebase and read the output against the original: method POST, JSON content type, body {"name":"Ada"}.
  4. Note what the converter did with shell quoting — the single quotes around the JSON belong to the shell and correctly do not appear in the code.
  5. Format the snippet with Code Formatter before committing, and if the request later misbehaves, validate the body you are actually sending with JSON Validator.

Checkpoint output

fetch("https://api.example.test/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" }),
});

Method, content type, and body all match the curl command — the client will send the same request the docs proved works.

Common mistakes

  • Forgetting curl examples sometimes rely on implicit behavior — -d alone implies POST, so a hand-port that drops -X POST may still work in curl and fail in fetch.
  • Copying the URL but losing the method, so the API answers 405 Method Not Allowed.
  • Treating shell quoting as part of the JSON payload and sending '{"name":"Ada"}' with literal quotes.
  • Skipping the Content-Type header, so the server parses the JSON body as form data or plain text.

Related tools and lessons