devtools-hub

HTTP Response Mock Builder

レスポンスを組み立てて curl / fetch / 生HTTP形式で出力

ステータスコード・ヘッダー(KV追加式)・ボディを組み立てて、curl / JavaScript fetch / 生HTTPレスポンスの3形式でコードを出力。APIドキュメント作成・テスト設計・モックサーバーの仕様書作りに役立ちます。

広告
OK
HTTP/1.1 200 OK
Content-Type: application/json

{
  "message": "OK"
}

Features

  • ステータスコードをプリセット(14種)または直接入力で選択
  • レスポンスヘッダーをKey/Value形式で追加・削除
  • Content-Typeプリセット(JSON/HTML/テキスト/XML)をワンクリック設定
  • curl形式 / fetch形式 / 生HTTPレスポンス の3タブで出力
  • JSON ボディの構文エラーを警告表示


HTTPレスポンスの構造 — ステータスコード・ヘッダー・ボディの役割

HTTPレスポンスはステータスライン・ヘッダー・ボディの3要素で構成されます。APIのモック設計やテストケースの作成では、正常系だけでなく各種エラーレスポンスのフォーマットを正確に定義することが重要です。

ステータスコードのカテゴリと使い分け

1xx(情報)・2xx(成功)・3xx(リダイレクト)・4xx(クライアントエラー)・5xx(サーバーエラー)の5カテゴリに分類されます。REST APIで頻繁に使うコード:200 OK(成功)・201 Created(作成成功)・204 No Content(削除成功等)・400 Bad Request(バリデーションエラー)・401 Unauthorized(認証エラー)・403 Forbidden(認可エラー)・404 Not Found・422 Unprocessable Entity(入力値エラー)・429 Too Many Requests(レート制限)・500 Internal Server Error。

Content-Typeヘッダーの重要性

Content-Typeはレスポンスボディの形式をクライアントに伝えるヘッダーです。application/jsonはJSONボディを示し、クライアントはJSON.parse()で解析します。text/htmlはブラウザがHTMLとしてレンダリングします。application/octet-streamはバイナリデータのダウンロードに使われます。charsetを明示しないとブラウザが文字コードを誤検出する場合があります(Content-Type: text/html; charset=utf-8が推奨)。

CORSヘッダーの設定方法

クロスオリジンリクエストを許可するには、レスポンスにAccess-Control-Allow-Origin: *(または特定ドメイン)を含める必要があります。プリフライト(OPTIONSリクエスト)にはAccess-Control-Allow-Methods: GET, POST, PUT, DELETEとAccess-Control-Allow-Headers: Content-Type, Authorizationも必要です。認証情報(Cookie/Bearer)を含む場合はAccess-Control-Allow-Credentials: trueとし、Allow-Originにワイルドカードは使えません。

モックAPIサーバーの作り方

HTTP Response Mock Builderで設計したレスポンスはNode.jsのhttp.createServer()でそのまま実装できます。res.writeHead(statusCode, headers)でステータスとヘッダーを設定し、res.end(body)でボディを送信します。json-serverやMSW(Mock Service Worker)を使うとよりリッチなモック環境を構築できます。MSWはブラウザのService Workerとして動作するため、実際のHTTPリクエストをインターセプトしてモックレスポンスを返せます。

広告

Related Tools

HTTP Status Reference

HTTPステータスコードを番号/キーワードで検索 — 説明・用途・ヘッダー例を表示

HTTPAPI開発者向け

使ってみる →

BOOTH

JSON Schema Validator

JSON と JSON Schema を並べてリアルタイムバリデーション

JSON開発者向けAPI

使ってみる →

BOOTH

cURL to Code

cURL コマンドを fetch / axios / Python requests / HTTPie に変換

開発者向けAPIWeb開発

使ってみる →

BOOTH

このツールを共有する