How to Convert cURL Commands to Fetch API

If you work with APIs, you have probably encountered cURL commands in documentation. Most API providers include cURL examples because they are concise, platform-independent and easy to generate. However, when building web applications, developers often need to convert those commands into JavaScript code. The modern Fetch API has become the standard way to perform HTTP requests in browsers and many server-side JavaScript environments.

Understanding how to translate cURL commands into Fetch requests is an essential skill for frontend and full-stack developers. Once you understand the mapping between cURL options and Fetch configuration, converting requests becomes straightforward.

What Is cURL?

cURL is a command-line tool used to transfer data between systems using various network protocols. It is most commonly used for making HTTP requests to APIs and web servers.

API documentation frequently includes cURL examples because they clearly show request methods, headers, authentication and request bodies without requiring a specific programming language.

curl https://api.example.com/users

This simple command performs an HTTP GET request to the specified endpoint.

What Is the Fetch API?

The Fetch API is a modern JavaScript interface for making HTTP requests. It is available in all modern browsers and has largely replaced older approaches such as XMLHttpRequest.

A basic Fetch request looks like this:

fetch("https://api.example.com/users")

.then((response) => response.json())
.then((data) => console.log(data));

Fetch uses promises, making asynchronous code cleaner and easier to manage.

The Simplest Conversion

The easiest cURL command to convert is a simple GET request.

curl https://api.example.com/users

Equivalent Fetch code:

fetch("https://api.example.com/users");

Since GET is the default HTTP method for both cURL and Fetch, no additional configuration is required.

Converting HTTP Methods

Many API requests use methods other than GET. In cURL, the -X flag specifies the HTTP method.

curl -X DELETE https://api.example.com/users/123

Equivalent Fetch request:

fetch("https://api.example.com/users/123", {

method: "DELETE",
});

The cURL -X option maps directly to the Fetch method property.

Converting Request Headers

Headers are one of the most common parts of API requests. In cURL, headers are specified using the -H option.

curl https://api.example.com/users \

-H "Authorization: Bearer TOKEN" -H "Accept: application/json"

Equivalent Fetch request:

fetch("https://api.example.com/users", {

headers: {
Authorization: "Bearer TOKEN",
Accept: "application/json",
},
});

Each cURL header becomes a key-value pair inside the Fetch headers object.

Converting JSON Request Bodies

POST and PUT requests often include JSON data. In cURL, request bodies are typically supplied using the -d option.

curl -X POST https://api.example.com/users \

-H "Content-Type: application/json" -d '{"name":"John","age":30}'

Equivalent Fetch request:

fetch("https://api.example.com/users", {

method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: "John",
age: 30,
}),
});

Using JSON.stringify is generally recommended because it guarantees valid JSON formatting.

Handling API Responses

One important difference between cURL and Fetch is response handling.

A cURL command usually prints the response directly to the terminal. Fetch returns a Response object that must be processed explicitly.

fetch("https://api.example.com/users")

.then((response) => response.json())
.then((data) => {
console.log(data);
});

Depending on the content type, you may use response.json(), response.text(), response.blob() or other response methods.

Authentication Examples

Authentication is another common scenario when converting requests.

curl https://api.example.com/profile \

-H "Authorization: Bearer YOUR_TOKEN"

Equivalent Fetch request:

fetch("https://api.example.com/profile", {

headers: {
Authorization: "Bearer YOUR_TOKEN",
},
});

The Authorization header is transferred directly without modification.

Common Conversion Mistakes

One common mistake is forgetting to convert request bodies into JSON strings. Unlike cURL, Fetch expects the body to be a string, FormData object, Blob or another supported type.

Another frequent issue is forgetting the Content-Type header when sending JSON data. Without it, servers may not interpret the request correctly.

Developers also sometimes assume Fetch automatically throws errors for HTTP status codes such as 404 or 500. Unlike many HTTP libraries, Fetch only rejects promises for network failures. Response status codes must be checked manually.

fetch(url)

.then((response) => {
if (!response.ok) {
throw new Error("Request failed");
}

return response.json();

});

Using Automated Converters

For simple requests, manual conversion is easy. However, large cURL commands containing many headers, authentication tokens and complex payloads can be tedious to convert by hand.

Many developers use dedicated cURL-to-Fetch conversion tools to generate JavaScript code automatically. These tools reduce errors and save time when working with lengthy API requests.

When to Use Fetch Instead of cURL

cURL is ideal for testing APIs from the command line, automation scripts and debugging. Fetch is designed for application code running in browsers or JavaScript environments.

In practice, developers often start with a cURL example from documentation and then convert it into Fetch code for integration into their application.

Conclusion

Converting cURL commands into Fetch API requests is a valuable skill for modern web development. Most conversions involve mapping HTTP methods, headers and request bodies into the Fetch configuration object. Once you understand how common cURL flags correspond to Fetch options, translating API examples becomes quick and predictable. Whether you perform conversions manually or use automated tools, understanding the underlying process will help you work more effectively with APIs and JavaScript applications.