配合前端 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