Converting cURL to fetch and axios

Almost every API documentation page gives you a curl example. It is a great way to try a request from the terminal, but at some point you need that request running inside an actual app. This guide shows how a cURL command maps onto JavaScript's fetch and the axios library, which parts translate cleanly, and which ones need a human eye.

A cURL command, piece by piece

Here is a typical POST request from an API doc:

curl -X POST https://api.example.com/login \
  -H "Content-Type: application/json" \
  -d '{"username":"dev","password":"secret"}'

Three things carry over to JavaScript:

• Method — -X POST becomes method: "POST".
• Headers — each -H becomes an entry in the headers object.
• Body — the -d payload becomes the request body.

The fetch version

const res = await fetch("https://api.example.com/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ username: "dev", password: "secret" }),
});

if (!res.ok) {
  throw new Error(`Request failed: ${res.status}`);
}
const data = await res.json();

Two details trip people up. First, the body must be a string — hence JSON.stringify. Second, fetch does not throw on a 404 or 500; it only rejects on network errors. That is why the if (!res.ok) check is essential, not optional.

The axios version

import axios from "axios";

const { data } = await axios.post(
  "https://api.example.com/login",
  { username: "dev", password: "secret" },
  { headers: { "Content-Type": "application/json" } }
);

axios does more for you: it serializes the body to JSON, sets the content type, parses the response, and throws automatically on 4xx and 5xx responses. That is less boilerplate, at the cost of an extra dependency.

fetch vs. axios at a glance

For a couple of requests, fetch keeps your bundle lean. For a larger app with shared auth headers, retries, or request cancellation, axios's built-in features earn their place.

What needs manual review

Automated conversion handles the common case, but watch for these:

• Shell quoting. Single vs. double quotes and escaped characters in the terminal do not always map cleanly to JavaScript strings — double-check the body.
• Multipart uploads. -F file uploads need a FormData object, not a JSON body.
• Authentication. A -H "Authorization: Bearer ..." header from a doc often contains a live token. Move it to an environment variable before committing.
• Cookies and redirects. Flags like --cookie and -L have separate options in fetch/axios (credentials, redirect handling).

A safe workflow

1. Paste the cURL command into a converter to get a starting point.
2. Read the generated code — confirm the method, headers, and body match your intent.
3. Replace any hard-coded secrets with environment variables.
4. Add error handling (res.ok for fetch; try/catch for axios).
5. Test against a development endpoint before pointing it at production.

Try it

The DevBox cURL Converter generates both fetch and axios versions side by side so you can pick the one that fits your project. Format the response with the JSON Formatter to confirm the shape of the data you get back.