フロントエンドフェッチAPIで適切な応答ヘッダー形式を設定する

M66 2025-05-28

フロントエンドの開発では、 Fetch APIはHTTP要求を送信して応答を取得するために使用される非常に一般的なインターフェイスです。フロントエンドとバックエンドがデータを正しく交換できるようにするには、応答ヘッダーの構成が重要です。 PHPは、HTTP応答ヘッダーを設定するヘッダー関数を提供します。フロントエンドフェッチAPIで使用すると、正しい構成により、応答形式やクロスドメイン要求などの問題が解決できることを確認できます。

1.ヘッダー関数を使用して、PHPで応答ヘッダーを設定します

PHPでは、ヘッダー関数を使用して、生のHTTP応答ヘッダーをブラウザに送信します。通常、コンテンツタイプ（コンテンツタイプ）、キャッシュコントロール、クロスドメインリソース共有（CORS）、およびその他の情報を設定するために使用されます。

 <?php
// 応答ヘッダーを設定します，応答コンテンツタイプを宣言します JSON
header('Content-Type: application/json');

// 設定 CORS 頭，特定のドメイン名からのリクエストを許可します
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');

// シミュレーションリターン JSON データ
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>

上記のPHPコードでは、ヘッダー関数を使用して応答ヘッダーを設定します。これには、JSON形式の応答のコンテンツタイプを指定します。アクセスコントロールアローオリジンを介してクロスドメインアクセスのルールを設定し、あらゆるソースからのリクエストを許可します。この時点で、フロントエンドは通常、フェッチAPIを介して応答データを受信できます。

2.フェッチAPIと組み合わせてリクエストを送信します

フロントエンドコードでは、 Fetch APIを使用してHTTPリクエストを送信して応答を取得します。フェッチの基本的な構文は次のとおりです。

 fetch('http://m66.net/api/example.php', {
  method: 'GET', // リクエスト方法
  headers: {
    'Content-Type': 'application/json' // ヘッダーをリクエストします，sendを指定します JSON 格式的データ
  }
})
.then(response => response.json()) // 応答を解析します JSON データ
.then(data => console.log(data)) // 出力响应データ
.catch(error => console.error('Error:', error)); // エラー処理

上記のコードは、PHPバックエンドにGETリクエストを送信し、リクエストヘッダーのコンテンツタイプがApplication/JSONであることを指定し、FrontEndがJSON形式で応答データを受信したいことを示しています。

3.クロスドメインの問題を解決します

現在の端とバックエンドが同じドメイン名またはポートにない場合、通常、ドメインのクロスリクエストの問題に遭遇します。フェッチAPIがクロスドメイン要求を正しく処理するためには、バックエンドは応答ヘッダーにCOR（クロスドメインリソース共有）関連設定を追加する必要があります。

PHPでは、クロスドメインアクセスを可能にするために、ヘッダー関数を介してアクセスコントロールアローオリジンなどのCORSヘッダーを設定できます。例えば：

 // すべてのソースからクロスドメインリクエストを許可します
header('Access-Control-Allow-Origin: *');
// 允许リクエスト方法 GET、POST、PUT、DELETE
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
// 允许ヘッダーをリクエストします中包含 Content-Type
header('Access-Control-Allow-Headers: Content-Type');

これらの設定により、フロントエンドフェッチリクエストを正常に送信し、ブラウザによってブロックされることなくデータを取得できます。

4。完全な例

フロントエンドとバックエンドコードを組み合わせて、フロントエンドフェッチAPIを使用してPHPのヘッダー関数を使用して応答ヘッダー形式を正しく設定する方法を示す完全な例を取得できます。

PHPコード：

 <?php
// 応答ヘッダーを設定します
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');

// シミュレーションリターン JSON データ
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>

JavaScriptコード：

 fetch('http://m66.net/api/example.php', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data)) // 出力：{ message: "Hello, World!" }
.catch(error => console.error('Error:', error));

このようにして、フロントエンドとバックエンドの間の通信はスムーズに進行し、データをJSON形式で正しく送信できるようにし、クロスドメインアクセスの問題を解決できます。

要約します

この記事では、応答データをフロントエンドに正しく渡すことができるように、フロントエンドのフェッチAPIを使用してPHPで応答ヘッダー形式を設定する方法について説明します。コンテンツタイプやアクセスコントロールアローオリジンなどの適切な応答ヘッダーを構成することにより、クロスドメインのリクエストと応答の正しさを確保できます。フロントエンド通信とバックエンド通信を含むアプリケーションを開発している場合、これらの応答ヘッダーを構成する方法を理解すると、データの相互作用がスムーズに完了するのに役立ちます。

header