配合前端fetch API 設置合適的響應頭格式

M66 2025-05-28

在前端開發中， fetch API 是一個非常常用的接口，用來發送HTTP 請求並獲取響應。為了確保前端和後端能夠正確地交換數據，響應頭的配置至關重要。 PHP 提供了header函數來設置HTTP 響應頭，在與前端fetch API 一起使用時，正確的配置能夠確保響應格式、跨域請求等問題都能夠得到解決。

1. PHP 中使用header函數設置響應頭

在PHP 中， header函數用於向瀏覽器發送原始HTTP 響應頭。通常，它用於設置內容類型（Content-Type）、緩存控制、跨域資源共享（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 代碼中， header函數被用來設置響應頭，包括指定響應的內容類型為JSON 格式。通過Access-Control-Allow-Origin設置跨域訪問的規則，允許任意來源的請求。此時，前端通過fetch API 可以正常接收到響應數據。

2. 配合fetch API 發送請求

在前端代碼中，我們使用fetch API 來發送HTTP 請求並獲取響應。 fetch的基本語法如下：

 fetch('http://m66.net/api/example.php', {
  method: 'GET', // 請求方法
  headers: {
    'Content-Type': 'application/json' // 請求頭，指定發送 JSON 格式的數據
  }
})
.then(response => response.json()) // 解析響應的 JSON 數據
.then(data => console.log(data)) // 輸出响应數據
.catch(error => console.error('Error:', error)); // 錯誤處理

上面的代碼向PHP 後端發送一個GET 請求，指定請求頭中的Content-Type為application/json ，表示前端希望接收JSON 格式的響應數據。

3. 解決跨域問題

當前端與後端不在同一個域名或端口時，通常會遇到跨域請求的問題。為了讓fetch API 可以正確地處理跨域請求，後端必須在響應頭中添加CORS（跨域資源共享）相關的設置。

在PHP 中，我們可以通過header函數來設置Access-Control-Allow-Origin等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');

這些設置確保了前端的fetch請求能夠成功發送並獲取數據，而不會被瀏覽器阻止。

4. 完整示例

綜合前端和後端的代碼，我們可以得到一個完整的示例，展示如何使用PHP 的header函數配合前端的fetch API 正確設置響應頭格式。

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 格式正確傳輸，並解決了跨域訪問的問題。

總結

本文介紹瞭如何在PHP 中使用header函數配合前端的fetch API 設置響應頭格式，確保響應的數據能夠正確傳遞給前端。通過配置適當的響應頭，如Content-Type和Access-Control-Allow-Origin ，可以確保跨域請求和響應的正確性。如果你正在開發涉及前後端通信的應用程序，了解如何配置這些響應頭將有助於順利完成數據交互。

header