LocalToolsオフラインブラウザツール集

カテゴリー: 開発ツール

cURL から fetch() への変換

サイト側で企画したツールツールが見つからない？

curl コマンドを JavaScript の fetch() 呼び出しに変換

ブラウザのネットワークタブや API ドキュメントからコピーした curl コマンドを貼り付けると、メソッド・ヘッダー・ボディを引き継いだ同等の JavaScript fetch() 呼び出しが得られます。変換はすべてブラウザ内で行われます。

fetch() スニペット
fetch("https://api.example.com/v1/items", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: "{\"name\":\"Ada\"}"
})
  .then((response) => response.json())
  .then((data) => console.log(data));

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

API ドキュメントやブラウザの「curl としてコピー」機能はどちらも curl コマンドを出力しますが、フロントエンドでは同じリクエストを fetch() として書く必要があるのが普通です。このツールは -X/--request、-H/--header、-d/--data（および --data-raw、--data-binary、--data-urlencode の各種）、--url、-u/--user、末尾の単独 URL を解析し、複数の孤立した引数や未対応のフラグなど認識できない形式については、誤った推測ではなく明確なエラーを報告します。

使い方

  1. curl コマンドを貼り付けます。
  2. 生成された fetch() スニペットを確認します。
  3. JavaScript にコピーします。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

リクエストはどこかに送信されますか？
されません。コマンドはテキストとして解析・書き換えられるだけで、実行はされません。
どの curl フラグに対応していますか？
-X/--request、-H/--header、-d/--data（および --data-raw、--data-binary、--data-urlencode）、--url、Basic 認証用の -u/--user、そして -s、-L、-k、-i のような引数を取らない一般的なフラグは安全に無視されます。それ以外は黙って無視せず、未対応のフラグとして報告されます。
なぜ Content-Type ヘッダーが追加されることがあるのですか？
コマンドにボディはあるが明示的な Content-Type ヘッダーがない場合、スニペットは application/json を追加します。これは JSON API に対する curl 自体のよくあるデフォルトに合わせたものです。別の形式が必要な場合は削除するか編集してください。

すべてのツールに戻る