cURLをFetchに変換

cURLをFetchに変換

cURLコマンドを一瞬でFetch APIコードに変換。HTTPヘッダー、認証トークン、Cookie、JSONペイロードを自動解析し、最新のasync/await対応JavaScriptコードを生成します。

クイックプリセット
cURLコマンド入力ターミナル
出力構文・ランタイム形式
タイムアウト時間 (ms)10,000 ms
/**
 * Generated by ToolsAA cURL to Fetch Engine (ES2022 async/await)
 * Zero external dependencies. 100% Client-Side Executed.
 */
async function executeRequest() {
  const url = 'https://api.stripe.com/v1/payment_intents';

  const body = new URLSearchParams({
    'amount': '2000',
    'currency': 'usd',
    'payment_method_types[]': 'card',
  });

  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 10000);

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Authorization': 'Basic ' + (typeof window !== 'undefined' ? btoa('sk_test_51MzEXAMPLESECRETKEY:') : Buffer.from('sk_test_51MzEXAMPLESECRETKEY:').toString('base64')),
      },
    body,
    credentials: 'include',
      signal: controller.signal,
    });

    clearTimeout(timeoutId);

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

    // Automatic MIME response parser
    const contentType = response.headers.get('content-type') || '';
    if (contentType.includes('application/json')) {
      const data = await response.json();
      return data;
    }

    return await response.text();
  } catch (error) {
    clearTimeout(timeoutId);
    if ((error as any)?.name === 'AbortError') {
      console.error('Request timed out after 10000ms');
    }
    throw error;
  }
}

// Call request
executeRequest()
  .then(data => console.log('Response Payload:', data))
  .catch(err => console.error('Fetch Execution Failed:', err));

cURLからFetch APIへの変換パイプライン

トークン数: 12•HTTPヘッダー: 1•構文解析スコア 76%•BROWSER
POSIX字句解析とトークン分解シェルエスケープ、引用符、引数フラグをASTに分解12 個のトークン (220 文字)プロトコル・ヘッダーの正規化認証トークン設定済 • SSL/TLS暗号化接続POST1 HTTPヘッダーMIME推論とペイロード直列化URLENCODED ペイロードプレビュー52 B (Body)モダンFetchコード生成76%BROWSER55 行 (10000ms)
主要メトリクスRFC 9110 DFA
HTTPメソッドPOST
ヘッダー総数1
ペイロード形式URLENCODED
処理効率 / ペイロード完全クライアントサイド実行・外部通信ゼロ
生成コード規模BROWSER
技術リファレンス・アーキテクチャガイド

cURL to Fetch Converter (JavaScript & Node) ガイド — 技術リファレンス

cURL コマンドをモダンな Fetch API 構文へ瞬時に変換。HTTP ヘッダー、認証トークン、Cookie、JSON ペイロードを解析し、実戦的で型安全な async/await JavaScript / TypeScript コードを生成します。

cURL to Fetch Converter (JavaScript & Node) ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図
cURL to Fetch Converter (JavaScript & Node) ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図

主要パラメータと設定項目

cURL コマンド CLI 文字列POSIX シェルコマンド (Bash / Zsh)

'curl' で始まる未加工のコマンドライン呼び出し文字列。バックスラッシュ(\)による複数行の改行継続、シングル / ダブルクォートのエスケープ、および標準的な POSIX フラグ仕様に対応しています。

初期値: curl -X GET 'https://api.example.com/data'
変換対象ランタイム & フレームワーク構文JavaScript / TypeScript ターゲット仕様

生成コードの構文フォーマットを指定します。標準ブラウザ向け ES2022 async/await、ジェネリクス型安全性を備えた TypeScript、AbortSignal 対応の Node.js 18+ サーバー構文、キャッシュタグ制御を含む Next.js App Router、または Axios クライアント構文から選択可能です。

初期値: browser
HTTP メソッド解決 (-X / --request)RFC 9110 HTTP メソッド (GET, POST, PUT, DELETE, PATCH, HEAD)

HTTP リクエストメソッド(動詞)。-X が省略された場合、cURL は通常デフォルトで GET を使用しますが、リクエストボディフラグ(-d, --data, -F)が存在する場合は自動的かつ暗黙的に POST へ切り替わります。

初期値: GET
HTTP リクエストヘッダー (-H / --header)HTTP ヘッダー Key-Value ペア

カスタムリクエストのメタデータヘッダー。ブラウザ環境の fetch 実装では、セキュリティ分離の観点から禁則ヘッダー(Forbidden Header Names:Host, Content-Length, Cookie 等)を手動で上書きすることはできません。

初期値: Content-Type: application/json
ペイロードデータボディ (-d / --data / -F)HTTP リクエストボディエンティティ

POST、PUT、または PATCH リクエストで送信されるデータペイロード。JSON 文字列は JSON.stringify()、application/x-www-form-urlencoded は URLSearchParams()、マルチパート送信は FormData() に動的に展開・パースされます。

初期値: {}
Basic 認証 & Bearer トークン認証 (-u / Bearer)Authorization 認証資格情報文字列

API 認証用クレデンシャル。cURL の -u user:pass は 'Authorization: Basic <base64>' ヘッダーへと合成され、-H 'Authorization: Bearer <token>' は構造化された変数として抽出され、マスキング処理も可能です。

初期値: Bearer <TOKEN>

現場のベストプラクティス・実践Tips

Fetch は HTTP 4xx や 5xx でも Reject されない(response.ok の落とし穴)

エラーステータスを出力する cURL CLI や、4xx / 5xx レスポンスで Promise を reject する Axios とは異なり、JavaScript ネイティブの Fetch API はネットワーク物理障害や CORS 遮断が発生したときにしか Promise を reject しません。404 Not Found、401 Unauthorized、500 Internal Server Error であっても resolve(正常終了)します。そのため、response.json() や response.text() を呼び出す前に、必ず 'if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);' で明示的なステータス検証を行ってください。

Fetch の Multipart/Form-Data で Content-Type を手動設定してはならない

cURL のファイルアップロードコマンド(-F / --form)を Fetch に変換する際、'Content-Type: multipart/form-data' ヘッダーを手動で明示してはいけません。手動指定すると、ブラウザがペイロード各パートを区切るために自動生成する動的境界パラメータ(例: 'boundary=----WebKitFormBoundary...')が欠落してしまいます。FormData インスタンスを直接 body オプションに渡すだけで、ブラウザが境界パラメータ付きの正しい Content-Type を自動算出して付与します。

cURL の -d フォームデータと JSON 直列化(シリアライズ)の混同防止

cURL では、明示的な Content-Type ヘッダーなしに -d を渡した場合、デフォルトは JSON ではなく 'application/x-www-form-urlencoded' とみなされます。-d 'key=val&foo=bar' を誤って JSON.stringify() でラップしてしまうミスが多発しています。ペイロードが Key-Value 形式('new URLSearchParams({ key: 'val', foo: 'bar' })' を使用すべき)なのか、正規の JSON('JSON.stringify(data)' と明示的な 'Content-Type: application/json' ヘッダーが必要)なのかを常に厳密に見極めてください。

ブラウザの禁則ヘッダー(Forbidden Headers)制約とターミナル cURL の挙動差

ターミナルの cURL は 'Cookie'、'User-Agent'、'Referer'、'Host' など任意の HTTP ヘッダーを自由に偽装・送信できます。しかしブラウザ上の JavaScript Fetch では、クロスサイトリクエストフォージェリ(CSRF)や Cookie 盗難を防ぐため、W3C Fetch 仕様によりこれらが「禁則ヘッダー(Forbidden Header Names)」に指定されています。ブラウザの fetch は手動指定された 'Cookie' ヘッダーを警告なしに破棄します。Cookie を送信したい場合は 'credentials: "include"'(または 'same-origin')を指定し、ブラウザの Cookie ジャーからセッショントークンを自動付与させてください。

よくある落とし穴とトラブルシューティング

⚠️TypeError: Failed to fetch(ターミナル cURL は成功するのにブラウザで CORS エラーになる)

cURL はブラウザの同一生成元ポリシー(Same-Origin Policy: SOP)が適用されないコマンドラインツールです。一方、クライアント側のブラウザ JavaScript から 'Access-Control-Allow-Origin' ヘッダーを返さないサードパーティ API に対して fetch() を実行すると、ブラウザがレスポンスへのアクセスを遮断します。これを解決するには、CORS 制約が適用されないバックエンドサーバー(Node.js、Next.js Route Handler、Cloudflare Workers 等)を経由して API をリクエスト(プロキシ)するか、送信先サーバー側で適切な CORS ヘッダーを設定してください。

⚠️レスポンス本文のパース時に「Unexpected token in JSON at position 0」が発生する

このエラーは、空のレスポンスボディ(例: 204 No Content)や、HTML エラーページ(例: Cloudflare 502 Bad Gateway)、またはプレーンテキストを返す API エンドポイントに対して 'await response.json()' を実行した場合に発生します。response.json() を呼ぶ前に 'response.headers.get('content-type')?.includes('application/json')' を検証するか、まず 'const text = await response.text()' で取得してから安全に JSON.parse() を try-catch でラップして解析してください。

⚠️マルチパートフォームのファイル送信時、バックエンド側で「No boundary found」エラーになる

fetch の headers に 'Content-Type: multipart/form-data' を手動で明示的に宣言していることが原因です。FormData() を使用する場合は、headers オブジェクトから 'Content-Type' を完全に削除してください。ブラウザや Node.js ランタイムが、計算された正確なマルチパート境界値を含む 'multipart/form-data; boundary=----WebKitFormBoundary...' を自動注入します。

⚠️バックスラッシュ(\)による複数行の cURL コマンドの解析に失敗する

Bash スクリプトや開発者向けドキュメントから複数行の cURL コマンドをコピーした際、バックスラッシュの直後に半角スペース('\ ')が存在すると、シェルやパーサーは改行を行継続ではなくリテラル文字列として誤認識してしまいます。当ツールのパーサーは '\ ' や '\ ' トークンを自動正規化し、末尾の不要な空白を除去して複数行のターミナルスニペットを単一の引数シーケンスに正しく統合します。

よくある質問 (FAQ)

cURL コマンドを JavaScript の Fetch コードに変換するにはどうすればよいですか?▼

cURL コマンドを Fetch に変換するには、コマンドラインから対象の URL を抽出し、-X フラグを fetch の 'method' プロパティ(GET, POST, PUT, DELETE など)にマッピングします。次に各 -H 引数を 'headers' オブジェクト内の Key-Value ペアへ変換し、-d または --data ペイロードを 'body' 内で 'JSON.stringify(payload)' または 'new URLSearchParams(payload)' に整形した上で、全体を 'const response = await fetch(url, options)' を含む 'async/await' 非同期関数でラップします。

ターミナルの cURL では成功するリクエストが、Fetch だと CORS エラーで失敗するのはなぜですか?▼

cURL はブラウザのサンドボックス外で動作するネイティブ HTTP クライアントであるため、同一生成元ポリシー(Same-Origin Policy)や CORS ルールの影響を一切受けません。一方、モダン Web ブラウザは不正な Web アプリケーションによる機密データの不正取得を防ぐために CORS を厳格に適用します。対象サーバーが Web アプリのオリジンを許可する 'Access-Control-Allow-Origin' ヘッダーを返さない場合、ブラウザは fetch リクエストを中断します。これを解消するには、バックエンドサーバーやサーバーレス API ルート(Route Handlers 等)を経由してリクエストをプロキシしてください。

cURL の Basic 認証 (-u user:password) は JavaScript Fetch でどのように処理しますか?▼

cURL の '-u username:password' は HTTP Basic 認証を送信します。モダンブラウザの JavaScript Fetch では、'btoa("username:password")' を使用して認証情報を Base64 エンコードし、'headers: { Authorization: `Basic ${btoa("username:password")}` }' として指定します。Node.js 環境では 'Buffer.from("username:password").toString("base64")' を使用することで、同様の標準ヘッダー値を生成できます。

cURL の -b オプションのように、Fetch API で Cookie を送信するにはどうすればよいですか?▼

ブラウザの JavaScript では、セキュリティ基準により 'Cookie' ヘッダーは禁則ヘッダー(Forbidden Header Name)に分類されており、fetch() の headers にプログラムから直接設定することはできません。対象ドメインに対してブラウザに保存されている Cookie を送信するには、fetch のオプションオブジェクトで 'credentials: "include"'(同一オリジンのみなら 'same-origin')を指定します。なお、ブラウザのセキュリティ制約が存在しない Node.js サーバー環境であれば、headers オブジェクト内に 'Cookie: session_id=xyz' を直接指定して送信できます。

cURL の -d、--data-raw、--data-urlencode の違いと Fetch での対応方法は?▼

cURL において '-d' および '--data-raw' は渡された文字列をそのまま送信し、-H で明示されない限り Content-Type は 'application/x-www-form-urlencoded' がデフォルトとなります。Fetch で JSON データを扱う場合は、'Content-Type: application/json' ヘッダーを指定した上で JSON.stringify() によるシリアライズが必要です。一方、cURL の '--data-urlencode' はパラメータ値を URL エンコードして送信するものであり、Fetch では 'new URLSearchParams({ key: value }).toString()' に Key-Value ペアを渡すことで同等の送信処理をネイティブに実現できます。

関連開発者ツール

全ツール一覧 →
XMLサイトマップ検証ツール開発者ツール

XMLサイトマップおよびインデックスファイルの構文を瞬時に検証。5万URL制限、50MB容量上限、W3C Datetime(ISO-8601)、hreflang相互リンク、画像拡張、Google Search Console登録エラーを完全チェックします。

ツールを開く→
Google検索結果プレビュー開発者ツール

PC・モバイル対応のGoogle検索結果(SERP)スニペット表示を正確なピクセル幅でシミュレーション。リッチリザルト、サイトリンク、リアルタイムCTRスコア判定でタイトルとディスクリプションの省略を事前検証します。

ツールを開く→
CSSメッシュグラデーション開発者ツール

多点制御のCSSメッシュグラデーション、アニメーション背景、SVGカラーメッシュを瞬時に生成。アンカーポイントやフィルム粒子ノイズを微調整し、CSS・Tailwindコードを即座にコピーできます。

ツールを開く→
UTMパラメータ生成ツール開発者ツール

Googleアナリティクス(GA4)対応のキャンペーン計測URLをブラウザ上で即座に一括生成・検証できる無料UTMパラメータ生成ツール。URL正規化、逆引きパース、QRコード書き出しにも完全対応。

ツールを開く→
JSON整形・検証ツール開発者ツール

不正な構文やクォート漏れのあるJSONをブラウザ上で即座に整形・検証・修復します。サーバー送信なしの完全ローカル処理で、構文チェック、圧縮、ツリー構造の可視化に対応します。

ツールを開く→
Base64変換・デコード開発者ツール

Base64文字列やバイナリファイルをブラウザ上で瞬時にエンコード・デコード。URLセーフなbase64url、UTF-8、MIME改行、Data URL、破損データのリアルタイム自動修復に対応。

ツールを開く→