实现前后端分离项目中 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