フロントエンド分離プロジェクトにAPI応答ヘッダーの正しい設定を実装する

M66 2025-05-28

フロントエンド、バックエンドで区切られたプロジェクトでは、フロントエンド（通常、VUE、React、Angularなどのフレームワークに基づく単一ページアプリケーション）およびバックエンド（通常、PHP、Node.js、Pythonなどに基づくAPIサービス）がHTTPインターフェイスを介して相互作用します。 API応答をフロントエンドで正しく処理できるようにし、クロスドメインの問題を回避し、セキュリティと標準化を確保するには、HTTP応答ヘッダーを正しく設定する必要があります。

PHPでは、最も一般的に使用されるツールはHeader（）関数です。この記事では、特定の例を使用して、 Header（）関数を使用してフロントエンド分離プロジェクトで一般的なAPI応答ヘッダーを設定する方法を説明します。

1.コンテンツタイプの応答ヘッダーを設定します

APIによって返されるデータは通常JSON形式であるため、フロントエンドとクライアントにこの点を伝える必要があります。

 header('Content-Type: application/json; charset=utf-8');

このコード行は、返されたデータ型がJSONであり、文字セットがUTF-8であることを示します。フロントエンドは、この情報に基づいて応答を正しく解析できます。

2.クロスドメイン（CORS）応答ヘッダーを設定します

電流とバックエンドが同じドメインにない場合、ブラウザはリクエストを傍受します。フロントエンドアクセスを許可するには、クロスドメイン応答ヘッダーを追加する必要があります。

 header('Access-Control-Allow-Origin: https://m66.net');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

これらの設定では、 https：//m66.netからAPIへのフロントエンドアクセスを可能にし、指定されたリクエストメソッドとカスタムリクエストヘッダーを許可します。注：生産環境では*使用せずに、特定のドメイン名を指定してセキュリティを改善することをお勧めします。

3.キャッシュを防ぐために応答ヘッダーを設定します

フロントエンドが毎回最新のデータを取得することを確認するために、キャッシュを無効にすることができます。

 header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

これらの応答ヘッダーは、返されたコンテンツをキャッシュしないようにクライアントとプロキシサーバーに通知します。

4。HTTPステータスコードを返します

データを返すだけでなく、対応するHTTPステータスコードも設定する必要がある場合があります。

たとえば、201に戻り、正常に作成されました。

 http_response_code(201);

または、ヘッダーを使用して設定します。

 header('HTTP/1.1 201 Created');

400、401、403、404、500などの一般的なエラー応答の場合、ビジネスニーズに応じて柔軟に設定できます。

5。完全な例

これが完全なAPI応答サンプルコードです：

 <?php
// 設定 JSON 応答ヘッダー
header('Content-Type: application/json; charset=utf-8');

// 設定跨域
header('Access-Control-Allow-Origin: https://m66.net');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

// キャッシュを無効にします
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

// 戻る 200 ステータスコード
http_response_code(200);

// 戻る JSON データ
$response = [
    'status' => 'success',
    'message' => 'API 正常に応答します',
    'data' => ['id' => 1, 'name' => '测试データ']
];

echo json_encode($response);
?>

header