cURLをFetchに変換
cURLコマンドを一瞬でFetch APIコードに変換。HTTPヘッダー、認証トークン、Cookie、JSONペイロードを自動解析し、最新のasync/await対応JavaScriptコードを生成します。
cURLコマンドを一瞬でFetch APIコードに変換。HTTPヘッダー、認証トークン、Cookie、JSONペイロードを自動解析し、最新のasync/await対応JavaScriptコードを生成します。
cURL コマンドをモダンな Fetch API 構文へ瞬時に変換。HTTP ヘッダー、認証トークン、Cookie、JSON ペイロードを解析し、実戦的で型安全な async/await JavaScript / TypeScript コードを生成します。
'curl' で始まる未加工のコマンドライン呼び出し文字列。バックスラッシュ(\)による複数行の改行継続、シングル / ダブルクォートのエスケープ、および標準的な POSIX フラグ仕様に対応しています。
生成コードの構文フォーマットを指定します。標準ブラウザ向け ES2022 async/await、ジェネリクス型安全性を備えた TypeScript、AbortSignal 対応の Node.js 18+ サーバー構文、キャッシュタグ制御を含む Next.js App Router、または Axios クライアント構文から選択可能です。
HTTP リクエストメソッド(動詞)。-X が省略された場合、cURL は通常デフォルトで GET を使用しますが、リクエストボディフラグ(-d, --data, -F)が存在する場合は自動的かつ暗黙的に POST へ切り替わります。
カスタムリクエストのメタデータヘッダー。ブラウザ環境の fetch 実装では、セキュリティ分離の観点から禁則ヘッダー(Forbidden Header Names:Host, Content-Length, Cookie 等)を手動で上書きすることはできません。
POST、PUT、または PATCH リクエストで送信されるデータペイロード。JSON 文字列は JSON.stringify()、application/x-www-form-urlencoded は URLSearchParams()、マルチパート送信は FormData() に動的に展開・パースされます。
API 認証用クレデンシャル。cURL の -u user:pass は 'Authorization: Basic <base64>' ヘッダーへと合成され、-H 'Authorization: Bearer <token>' は構造化された変数として抽出され、マスキング処理も可能です。
エラーステータスを出力する 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}`);' で明示的なステータス検証を行ってください。
cURL のファイルアップロードコマンド(-F / --form)を Fetch に変換する際、'Content-Type: multipart/form-data' ヘッダーを手動で明示してはいけません。手動指定すると、ブラウザがペイロード各パートを区切るために自動生成する動的境界パラメータ(例: 'boundary=----WebKitFormBoundary...')が欠落してしまいます。FormData インスタンスを直接 body オプションに渡すだけで、ブラウザが境界パラメータ付きの正しい Content-Type を自動算出して付与します。
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' ヘッダーが必要)なのかを常に厳密に見極めてください。
ターミナルの cURL は 'Cookie'、'User-Agent'、'Referer'、'Host' など任意の HTTP ヘッダーを自由に偽装・送信できます。しかしブラウザ上の JavaScript Fetch では、クロスサイトリクエストフォージェリ(CSRF)や Cookie 盗難を防ぐため、W3C Fetch 仕様によりこれらが「禁則ヘッダー(Forbidden Header Names)」に指定されています。ブラウザの fetch は手動指定された 'Cookie' ヘッダーを警告なしに破棄します。Cookie を送信したい場合は 'credentials: "include"'(または 'same-origin')を指定し、ブラウザの Cookie ジャーからセッショントークンを自動付与させてください。
cURL はブラウザの同一生成元ポリシー(Same-Origin Policy: SOP)が適用されないコマンドラインツールです。一方、クライアント側のブラウザ JavaScript から 'Access-Control-Allow-Origin' ヘッダーを返さないサードパーティ API に対して fetch() を実行すると、ブラウザがレスポンスへのアクセスを遮断します。これを解決するには、CORS 制約が適用されないバックエンドサーバー(Node.js、Next.js Route Handler、Cloudflare Workers 等)を経由して API をリクエスト(プロキシ)するか、送信先サーバー側で適切な CORS ヘッダーを設定してください。
このエラーは、空のレスポンスボディ(例: 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 でラップして解析してください。
fetch の headers に 'Content-Type: multipart/form-data' を手動で明示的に宣言していることが原因です。FormData() を使用する場合は、headers オブジェクトから 'Content-Type' を完全に削除してください。ブラウザや Node.js ランタイムが、計算された正確なマルチパート境界値を含む 'multipart/form-data; boundary=----WebKitFormBoundary...' を自動注入します。
Bash スクリプトや開発者向けドキュメントから複数行の cURL コマンドをコピーした際、バックスラッシュの直後に半角スペース('\ ')が存在すると、シェルやパーサーは改行を行継続ではなくリテラル文字列として誤認識してしまいます。当ツールのパーサーは '\ ' や '\ ' トークンを自動正規化し、末尾の不要な空白を除去して複数行のターミナルスニペットを単一の引数シーケンスに正しく統合します。
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 はブラウザのサンドボックス外で動作するネイティブ HTTP クライアントであるため、同一生成元ポリシー(Same-Origin Policy)や CORS ルールの影響を一切受けません。一方、モダン Web ブラウザは不正な Web アプリケーションによる機密データの不正取得を防ぐために CORS を厳格に適用します。対象サーバーが Web アプリのオリジンを許可する 'Access-Control-Allow-Origin' ヘッダーを返さない場合、ブラウザは fetch リクエストを中断します。これを解消するには、バックエンドサーバーやサーバーレス API ルート(Route Handlers 等)を経由してリクエストをプロキシしてください。
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")' を使用することで、同様の標準ヘッダー値を生成できます。
ブラウザの JavaScript では、セキュリティ基準により 'Cookie' ヘッダーは禁則ヘッダー(Forbidden Header Name)に分類されており、fetch() の headers にプログラムから直接設定することはできません。対象ドメインに対してブラウザに保存されている Cookie を送信するには、fetch のオプションオブジェクトで 'credentials: "include"'(同一オリジンのみなら 'same-origin')を指定します。なお、ブラウザのセキュリティ制約が存在しない Node.js サーバー環境であれば、headers オブジェクト内に 'Cookie: session_id=xyz' を直接指定して送信できます。
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サイトマップおよびインデックスファイルの構文を瞬時に検証。5万URL制限、50MB容量上限、W3C Datetime(ISO-8601)、hreflang相互リンク、画像拡張、Google Search Console登録エラーを完全チェックします。
PC・モバイル対応のGoogle検索結果(SERP)スニペット表示を正確なピクセル幅でシミュレーション。リッチリザルト、サイトリンク、リアルタイムCTRスコア判定でタイトルとディスクリプションの省略を事前検証します。
多点制御のCSSメッシュグラデーション、アニメーション背景、SVGカラーメッシュを瞬時に生成。アンカーポイントやフィルム粒子ノイズを微調整し、CSS・Tailwindコードを即座にコピーできます。
Googleアナリティクス(GA4)対応のキャンペーン計測URLをブラウザ上で即座に一括生成・検証できる無料UTMパラメータ生成ツール。URL正規化、逆引きパース、QRコード書き出しにも完全対応。
不正な構文やクォート漏れのあるJSONをブラウザ上で即座に整形・検証・修復します。サーバー送信なしの完全ローカル処理で、構文チェック、圧縮、ツリー構造の可視化に対応します。
Base64文字列やバイナリファイルをブラウザ上で瞬時にエンコード・デコード。URLセーフなbase64url、UTF-8、MIME改行、Data URL、破損データのリアルタイム自動修復に対応。