Home
cURL to Fetch

cURL Command to JavaScript Fetch ConverterES2024 / Axios / Node 18+

Instantly transform raw curl commands into production-grade JavaScript fetch & Axios snippets. 100% computed inside your browser with zero network transmission.

Raw cURL Command(388 chars)
Parsed Breakdown
POST
https://api.github.com/repos/octocat/Hello-World/issues
Auth Mode
bearer
Payload Format
json
Headers Count
4 custom
Timeout
Default
// JavaScript Native Fetch (async/await)
async function sendRequest() {
  const url = "https://api.github.com/repos/octocat/Hello-World/issues";

  const headers = {
    Accept: "application/vnd.github+json",
    Authorization: "Bearer gho_16C7e42F292c6912E7710c838347Ae178B4a",
    "X-GitHub-Api-Version": "2022-11-28",
    "Content-Type": "application/json"
  };

  const body = JSON.stringify({
    "title": "Found a bug in auth flow",
    "body": "Need to inspect JWT claims properly",
    "labels": [
      "bug",
      "critical"
    ]
  });

  try {
    const response = await fetch(url, {
      method: "POST",
      headers,
      body
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Response:', data);
    return data;
  } catch (error) {
    console.error('Request failed:', error);
  }
}

sendRequest();
Standard client/server JS syntax ready for React, Next.js, or Node.js.40 lines
Integration Quick Notes
  • •CORS Restrictions: Browser Fetch enforces Same-Origin Policy. If you get a CORS error, dispatch your request via a Next.js Route Handler (/api/...) or backend proxy.
  • •FormData Boundaries: When uploading with new FormData(), do not set Content-Type manually; the browser calculates the multipart boundary automatically.
  • •AbortSignal Timeout: Modern runtimes support AbortSignal.timeout(ms) for elegant timeout management without manual setTimeout listeners.

cURL to JavaScript Flags Cheatsheet

Quick lookup of common cURL parameters and their JavaScript Fetch & Axios equivalents.

Flag / AliasCategoryDescriptionJavaScript / Fetch Equivalent
-X(--request)GeneralSpecifies custom request method (POST, PUT, DELETE, PATCH, etc.)method: 'POST'
-H(--header)HeadersExtra HTTP header to include in requestheaders: { 'Header': 'value' }
-d(--data)BodyHTTP POST data payload (JSON, urlencoded string, or raw text)body: JSON.stringify(...) or body: '...'
--json(--json)BodySends JSON data and sets Content-Type/Accept to application/json (curl 7.82+)headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(...)
--data-raw(--data-raw)BodySends raw data payload without @ special character handlingbody: '...'
--data-urlencode(--data-urlencode)BodyURL-encodes data payload parametersbody: new URLSearchParams(...)
-F(--form)BodyMultipart form data (mimics browser form submission / file upload)const form = new FormData()
-u(--user)AuthHTTP Basic Authentication username:password credentialsheaders: { 'Authorization': 'Basic ' + btoa('user:pass') }
--oauth2-bearer(--oauth2-bearer)AuthOAuth 2.0 Bearer access tokenheaders: { 'Authorization': 'Bearer ' + token }
-A(--user-agent)HeadersCustom User-Agent string headerheaders: { 'User-Agent': '...' }
-b(--cookie)HeadersCookie header or cookie jar stringcredentials: 'include' (Browser) or headers: { Cookie: '...' }
-e(--referer)HeadersReferer URL headerheaders: { 'Referer': '...' }
-m(--max-time)NetworkMaximum time in seconds allowed for the transfersignal: AbortSignal.timeout(ms)
-L(--location)NetworkFollow HTTP 3xx redirects automaticallyredirect: 'follow'
-I(--head)GeneralFetch the HTTP header only (HEAD request method)method: 'HEAD'
-k(--insecure)NetworkAllow insecure SSL/TLS certificate connectionsagent: new https.Agent({ rejectUnauthorized: false }) (Node)
--compressed(--compressed)NetworkRequest compressed response (gzip, deflate, brotli)Handled natively by browser / modern runtime
-G(--get)GeneralAppend -d data parameters into the URL query stringAppends params to URLSearchParams

Native Fetch vs. Axios Comparison

Native Fetch API

Zero Dependencies
  • Zero Bundle Cost: Built directly into all modern web browsers and Node.js 18+.
  • Standards Compliant: Official W3C WHATWG specification, universal web standard.
  • Manual JSON Parsing: Requires calling await response.json() explicitly.
  • HTTP Error Statuses: Does NOT reject on 404 or 500 status codes; must inspect response.ok.

Axios Library

Feature Rich
  • Automatic JSON Transformation: Access parsed data directly via response.data.
  • Automatic Error Rejection: Status codes outside 2xx automatically trigger the catch block.
  • Interceptors & Auth: Built-in support for request/response middleware and native auth configs.
  • External Package: Requires npm install axios and adds ~13KB to client bundle.

Frequently Asked Questions (FAQ)

Why does cURL work in terminal but Fetch fails with "CORS error"?

cURL executes directly from your operating system without origin enforcement. Browsers enforce the Same-Origin Policy (SOP). If the target server lacks Access-Control-Allow-Origin headers, the browser will block the response. Execute the request in a server environment (like a Next.js Route Handler) to bypass CORS.

Is my cURL command or auth secret sent to any remote server?

Never. 100% of the lexical parsing, token analysis, and code generation runs entirely within your browser client (`use client`). There are zero server-side telemetry or API requests involved.

How does -u username:password translate to Fetch?

cURL converts credentials using HTTP Basic Auth into an Authorization: Basic <base64> header. In JavaScript, this is generated using btoa('user:pass'). In Axios, you can alternatively pass an auth: { username, password } object.

Can I convert multi-line cURL commands with backslashes?

Yes! Our parser automatically normalizes multi-line commands with trailing backslashes (`\`), Windows carats (`^`), or PowerShell backticks (`` ` ``), properly handling single quotes, double quotes, and shell variables.