無料登録不要 CORS注意

🌐 HTTP リクエストの使い方

ブラウザから直接 HTTP(S) リクエストを送信し、ステータスコード・ヘッダー・レスポンスボディを確認できます。GET・POST・PUT・PATCH・DELETE など主要な HTTP メソッドに対応し、Authorization・Content-Type などのカスタムヘッダーも自由に設定できます。REST API の動作確認・認証ヘッダーのテスト・Webhook の手動送信など、さまざまなデバッグシナリオに対応しています。curl や Postman を起動せずにブラウザだけで API の動作を素早く確認したい場合に最適なツールです。

🚀 今すぐ HTTP リクエストを送る →

📌 このツールでできること

HTTP リクエストツールでは、以下の操作が可能です。

GET / POST / PUT / PATCH / DELETE などの HTTP メソッドを選択
URL を入力してリクエストを送信
任意のリクエストヘッダーを追加（Authorization、Content-Type など）
POST / PUT のリクエストボディを JSON 形式で入力
レスポンスのステータスコード・ヘッダー・ボディを表示
レスポンス JSON の整形表示（見やすくインデントされた形式）
レスポンス時間の計測
Bearer トークン・Basic 認証ヘッダーの手動設定によるセキュアな API テスト
パブリック API（GitHub API・天気情報 API 等）の動作をブラウザから即確認

🚀 使い方

HTTP メソッド（GET, POST, PUT, DELETE など）をドロップダウンから選択します。
リクエスト先の URL を入力します（例：https://api.example.com/users）。
必要に応じてヘッダーを追加します（例：Authorization: Bearer eyJ...）。
POST / PUT の場合はリクエストボディに JSON を入力します。
「送信」ボタンをクリックするとリクエストが実行され、レスポンスが表示されます。

💡 活用例

REST API の動作確認

開発中の API エンドポイントの動作を curl や Postman を開かずにブラウザ上で素早く確認できます。

GET https://jsonplaceholder.typicode.com/users/1
→ { "id": 1, "name": "Leanne Graham", ... }

認証ヘッダーのテスト

JWT トークンを Authorization ヘッダーに付与して API にアクセスし、認証が正しく機能するか確認できます。

Authorization: Bearer eyJhbGciOiJSUzI1NiJ9...
Content-Type: application/json

Webhook レスポンスの確認

外部サービス（Stripe、GitHub など）の Webhook を受け取る API の動作を、手動でリクエストを送って確認できます。

公開 API の探索

パブリック API（天気情報、為替レート、GitHub API など）を手軽に試して、レスポンスの構造を把握できます。

🔍 技術的な背景 / 仕組み

このツールはブラウザ標準の Fetch API を使用してリクエストを送信します。

HTTP メソッドの違いと使い分け

HTTP メソッドはリソースに対する操作の種類を示します。GET はリソースの取得（副作用なし）、POST はリソースの新規作成やデータ送信、PUT はリソースの全体置き換え、PATCH はリソースの部分更新、DELETE はリソースの削除に使います。REST API 設計の原則では、これらのメソッドを正しく使い分けることで API の意図が明確になります。

リクエストヘッダーの種類と役割

よく使うリクエストヘッダーとその役割を把握しておくと API デバッグがスムーズになります。Authorization は認証情報を運ぶヘッダーで、Bearer <token> や Basic <base64> 形式が一般的です。Content-Type はリクエストボディのメディアタイプを示し（例：application/json）、Accept はクライアントが受け入れ可能なレスポンス形式を指定します。X-Request-ID のようなカスタムヘッダーも自由に追加できます。

CORS（Cross-Origin Resource Sharing）制約について

ブラウザのセキュリティポリシーにより、異なるオリジンへのリクエストは CORS の制約を受けます。リクエスト先のサーバーが適切な CORS ヘッダー（Access-Control-Allow-Origin）を返さない場合、ブラウザがレスポンスをブロックします。

// CORS エラーの例
Access to fetch at 'https://api.example.com' from origin 'https://utils.celalink.co.jp'
has been blocked by CORS policy.

CORS エラーが発生した場合の対処法：

対象 API が CORS に対応しているか確認する
開発環境では CORS を許可するプロキシサーバーを経由する
curl や Postman など CORS 制約のないツールを使用する
ブラウザ拡張機能（Allow CORS など）を開発時のみ使用する

HTTP ステータスコードの見方

レスポンスのステータスコードはリクエストの結果を示します。2xx は成功（200 OK・201 Created・204 No Content）、3xx はリダイレクト、4xx はクライアントエラー（400 Bad Request・401 Unauthorized・403 Forbidden・404 Not Found・422 Unprocessable Entity）、5xx はサーバーエラーを表します。API デバッグでは特に 4xx のエラーボディに詳細なエラー原因が含まれることが多いため、レスポンスボディを確認することが重要です。

❓ よくある質問

Q. CORS エラーが出てレスポンスが見られません: CORS はブラウザのセキュリティ機能です。対象の API がブラウザからのクロスオリジンリクエストを許可していない場合、このツールからはアクセスできません。同じ URL でも curl なら問題なく動作します。API サーバー側で Access-Control-Allow-Origin ヘッダーを設定するか、サーバーサイドからリクエストしてください。
Q. HTTP（非 HTTPS）の URL にもリクエストできますか？: このツール自体が HTTPS で提供されているため、ブラウザの Mixed Content ポリシーにより http:// の URL へのリクエストはブロックされる場合があります。ローカル開発環境（http://localhost）は例外として許可されることが多いです。
Q. リクエスト先に認証情報（Cookie）は送られますか？: デフォルトでは、クロスオリジンリクエストに Cookie などの認証情報は含まれません。credentials: include オプションが必要ですが、サーバー側でも Access-Control-Allow-Credentials: true の設定が必要です。
Q. ファイルのアップロード（multipart/form-data）はできますか？: 現在のバージョンでは JSON ボディの送信に対応しています。バイナリファイルのアップロードには対応していません。
Q. Basic 認証や Bearer トークン認証はどう設定しますか？: Bearer トークン認証の場合は、ヘッダーに Authorization: Bearer <トークン文字列> を追加してください。Basic 認証の場合は ユーザー名:パスワード を Base64 エンコードして Authorization: Basic <base64文字列> の形式で設定します。Base64 エンコードには本サイトの Base64 エンコードツールが利用できます。
Q. 大きなレスポンスボディはどこまで表示されますか？: ブラウザのメモリに収まる範囲であればすべて表示されます。非常に大きなレスポンス（数十 MB 以上）の場合はブラウザが遅くなる場合があります。大量データを扱う場合は、API 側でページネーションを活用するか、curl コマンドを使うことをおすすめします。

📚 関連書籍・商品 PR

※ 本リンクはアフィリエイト広告を含みます。

🌐 HTTP リクエスト の使い方