POSTリクエスト

2024年8月8日2024年8月9日

クライアント                 サーバー
    |                          |
    |  ---- POSTリクエスト ---> |
    |                          |
    |                          | [1. リクエスト受信]
    |                          | [2. データ処理]
    |                          | [3. レスポンス生成]
    |                          |
    | <--- レスポンス送信 ----- |
    |                          |
 [4. レスポンス処理]            |
    |                          |

〇リクエスト受信:

サーバーがPOSTリクエストを受け取ります。
リクエストヘッダーとボディを解析します。

+-------------------------------------------------------+
|                   POST リクエスト構造                   |
+-------------------------------------------------------+
| リクエストライン                                        |
+-------------------------------------------------------+
| POST /api/users HTTP/1.1                              |
+-------------------------------------------------------+
| ヘッダー                                               |
+-------------------------------------------------------+
| Host: example.com                                     |
| Content-Type: application/json                        |
| Content-Length: 85                                    |
| User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) |
| Accept: application/json                              |
| Origin: https://example.com                           |
| Referer: https://example.com/register                 |
| Cookie: session_id=abc123                             |
| Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI...  |
+-------------------------------------------------------+
| ボディ                                                |
+-------------------------------------------------------+
| {                                                     |
|   "username": "newuser",                              |
|   "email": "newuser@example.com",                     |
|   "password": "securepassword123"                     |
| }                                                     |
+-------------------------------------------------------+

Google CHROMEの開発者ツールでPOSTリクエストの詳細を確認する方法について

1）「Network」タブの選択:

開発者ツールの上部にあるタブから「Network」を選択します。

2）確認したいリクエスト選択

Network タブ内の Name の一覧は、ページの読み込み中に発生したすべてのネットワークリクエストの一覧です。

※これには HTML、CSS、JavaScript、画像、API コール、その他のリソースへのリクエストが含まれます。大規模なウェブアプリケーションでは、この一覧はかなり長くなることがあります。

リクエストメソッドでフィルタリング:
リクエスト一覧の列ヘッダー（通常は Name, Status, Type, Initiator, Size, Time などが表示されています）の上で右クリックします。表示されるコンテキストメニューから “Method” にチェックを入れます。

3）リクエストの詳細確認

上部にあるタブから “Headers” を選択

a. General:

Request URL: リクエストが送信されたURL
Request Method: POSTであることを確認
Status Code: サーバーからのレスポンスステータス

b. Response Headers:

サーバーからのレスポンスに関する情報

c. Request Headers:

Content-Type: application/x-www-form-urlencoded (通常のフォーム送信の場合)
その他のHTTPヘッダー情報

d. Form Data:

このセクションでPOSTで送信されたデータを確認できます

ヘッダー	ブラウザ自動設定	プログラムによる設定
User-Agent クライアントのブラウザや環境情報	✓	○
Accept クライアントが受け入れ可能なレスポンスの種類	✓	○
Accept-Language	✓	○
Cookie	✓	○
Referer リクエストの送信元ページのURL	✓	△
Content-Type	△	✓
Authorization	×	✓

✓: 通常自動設定
○: 必要に応じて設定可能
△: 特定の状況で設定
×: 通常設定しない

〇データ処理:

受け取ったデータの検証を行います（例：必須フィールドの確認、データ型の検証）。
必要に応じてデータベース操作を行います（例：データの保存、更新）。
ビジネスロジックを実行します（例：計算、外部APIとの連携）。

〇レスポンス生成:

処理結果に基づいてレスポンスを生成します。
レスポンスには通常以下の要素が含まれます： a. ステータスコード（例：200 OK, 400 Bad Request, 500 Internal Server Error） b. レスポンスヘッダー（例：Content-Type, Cache-Control） c. レスポンスボディ（処理結果のデータ、メッセージなど）

レスポンスのデータ形式は、通常 Content-Type HTTPヘッダーで指定されます：