How to correctly set the response header format with the front-end fetch API in PHP?

M66 2025-05-28

In front-end development, the fetch API is a very common interface used to send HTTP requests and get responses. To ensure that the front-end and back-end can exchange data correctly, the configuration of the response header is crucial. PHP provides header function to set HTTP response headers. When used with the front-end fetch API, correct configuration can ensure that problems such as response formats and cross-domain requests can be solved.

1. Use header function to set response headers in PHP

In PHP, the header function is used to send raw HTTP response headers to the browser. Usually, it is used to set content type (Content-Type), cache control, cross-domain resource sharing (CORS), and other information.

 <?php
// Set the response header，Declare the response content type as JSON
header('Content-Type: application/json');

// set up CORS head，Allow requests from specific domain names
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');

// Simulation Return JSON data
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>

In the above PHP code, the header function is used to set the response header, including specifying the content type of the response to be in JSON format. Set rules for cross-domain access through Access-Control-Allow-Origin , allowing requests from any source. At this time, the front-end can receive the response data normally through the fetch API.

2. Send requests in conjunction with the fetch API

In the front-end code, we use the fetch API to send HTTP requests and get the response. The basic syntax of fetch is as follows:

 fetch('http://m66.net/api/example.php', {
  method: 'GET', // Request method
  headers: {
    'Content-Type': 'application/json' // Request header，Specify send JSON 格式的data
  }
})
.then(response => response.json()) // parsing the response JSON data
.then(data => console.log(data)) // Output响应data
.catch(error => console.error('Error:', error)); // Error handling

The above code sends a GET request to the PHP backend, specifying that the Content-Type in the request header is application/json , indicating that the frontend wants to receive response data in JSON format.

3. Solve cross-domain problems

When the current end and the backend are not on the same domain name or port, you usually encounter cross-domain request problems. In order for the fetch API to handle cross-domain requests correctly, the backend must add CORS (cross-domain resource sharing) related settings in the response header.

In PHP, we can set CORS headers such as Access-Control-Allow-Origin through the header function to allow cross-domain access. For example:

 // Allow cross-domain requests from all sources
header('Access-Control-Allow-Origin: *');
// 允许Request method GET、POST、PUT、DELETE
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
// 允许Request header中包含 Content-Type
header('Access-Control-Allow-Headers: Content-Type');

These settings ensure that the front-end fetch request can be sent successfully and fetched data without being blocked by the browser.

4. Complete example

Combining the front-end and back-end code, we can get a complete example showing how to correctly set the response header format using PHP's header function with the front-end fetch API.

PHP Code:

 <?php
// Set the response header
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');

// Simulation Return JSON data
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>

JavaScript code:

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

In this way, communication between the front-end and the back-end can proceed smoothly, ensuring that the data can be transmitted correctly in JSON format, and solving the problem of cross-domain access.

Summarize

This article describes how to set the response header format in PHP with the fetch API of the front-end to ensure that the response data can be correctly passed to the front-end. By configuring appropriate response headers such as Content-Type and Access-Control-Allow-Origin , you can ensure the correctness of cross-domain requests and responses. If you are developing applications involving front- and back-end communications, understanding how to configure these response headers will help to complete data interactions smoothly.

Related Tags:
API

header