實現前後端分離項目中API 響應頭的正確設置

M66 2025-05-28

在前後端分離的項目中，前端（通常是基於Vue、React、Angular 等框架的單頁應用）與後端（通常是基於PHP、Node.js、Python 等的API 服務）通過HTTP 接口進行交互。為了確保API 響應能被前端正確處理、避免跨域問題、保證安全和標準化，我們必須正確設置HTTP 響應頭。

在PHP 中，最常用的工具就是header()函數。本文將通過具體示例，講解如何用header()函數設置前後端分離項目中的常見API 響應頭。

1. 設置Content-Type響應頭

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 設置：

 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