HTTP response headers are pieces of information sent by the server to the client along with an HTTP response.
When a React Native application communicates with a REST API, the server can use response headers to provide information about the response, such as its content type, caching instructions, server information, and other response metadata.
A response header is a key-value pair sent by a server with an HTTP response.
Example:
Content-Type: application/json
The server uses this header to tell the client what type of content is included in the response.
Response headers provide additional information about the server's response.
They can be used to:
REST APIs commonly use response headers to provide metadata along with JSON responses.
React Native
↑
HTTP Response
↑
Response Headers
↑
PHP REST API
The mobile application receives both the response headers and the response body.
A response header contains a name and a value separated by a colon.
Content-Type: application/json
The header name is Content-Type and the value is application/json.
Some commonly encountered response headers include:
The exact headers returned depend on the server, framework, API, and request.
The Content-Type response header tells the client what type of content is returned by the server.
Content-Type: application/json
REST APIs commonly use application/json when returning JSON data.
A PHP REST API can specify that its response contains JSON.
header("Content-Type: application/json");
After setting the header, the API can return JSON data.
echo json_encode([
"success" => true,
"message" => "Data loaded"
]);
A GET request can receive response headers together with the requested data.
GET /api/students
The server might return:
HTTP/1.1 200 OK
Content-Type: application/json
{
"success": true,
"data": []
}
After a POST request creates a resource, the server can return response headers describing the result.
HTTP/1.1 201 Created
Content-Type: application/json
Location: /api/students/25
The response can also contain a JSON representation of the newly created resource.
A PUT request can also return response headers after successfully updating a resource.
HTTP/1.1 200 OK
Content-Type: application/json
The server can return the updated resource in the response body.
A PATCH request can return response headers together with the result of a partial update.
HTTP/1.1 200 OK
Content-Type: application/json
The response can contain the updated information or a success message.
A DELETE request can also return response headers.
HTTP/1.1 204 No Content
When there is no response body, the API may use 204 No Content.
The Fetch API provides access to response headers through the response object's headers property.
const response = await fetch(
"https://example.com/api/students"
);
const contentType =
response.headers.get("Content-Type");
console.log(contentType);
The get() method can be used to retrieve a specific response header.
const value =
response.headers.get("Content-Type");
console.log(value);
If the requested header is not available, the result can be null.
A mobile application can inspect the response Content-Type when needed.
const contentType =
response.headers.get("Content-Type");
if (contentType &&
contentType.includes("application/json")) {
console.log("JSON response");
}
This can help the application understand the type of response data.
The Content-Length header can indicate the size of the response body in bytes when provided.
Content-Length: 250
The actual presence and behavior of this header can depend on the server and how the response is transmitted.
The Cache-Control response header provides caching instructions to clients and intermediate caches.
Cache-Control: no-cache
Caching behavior depends on the directives provided by the server.
An ETag can identify a particular version of a resource.
ETag: "abc123"
ETags can be used with conditional requests to help determine whether a resource has changed.
The Location response header can provide the URI of a resource or another relevant location.
For example, after creating a student:
HTTP/1.1 201 Created
Location: /api/students/25
The URL identifies the newly created resource.
PHP can send response headers using the header() function.
header("Content-Type: application/json");
echo json_encode([
"success" => true,
"data" => []
]);
The header should be sent before the response body is output.
PHP can send multiple response headers.
header("Content-Type: application/json");
header("Cache-Control: no-cache");
Each header provides different information or instructions to the client.
Response headers are sent together with the HTTP status and response body.
HTTP/1.1 200 OK
Content-Type: application/json
{
"success": true,
"data": []
}
The status code describes the result, while the headers provide additional response information.
Axios provides access to response headers through the response object.
const response = await axios.get(
"https://example.com/api/students"
);
console.log(response.headers);
A specific header can be read from the headers object.
console.log(
response.headers["content-type"]
);
Postman displays response headers after an API request is sent.
For example:
| Header | Example Value |
|---|---|
| Content-Type | application/json |
| Cache-Control | no-cache |
| ETag | "abc123" |
This makes Postman useful for inspecting how a REST API responds.
CORS-related response headers can control whether browser-based clients from another origin are allowed to access a response.
For example:
Access-Control-Allow-Origin: *
CORS is primarily a browser security mechanism. React Native applications do not use browser CORS in the same way as web browsers.
Authentication systems can also use response headers in certain API designs.
For example, a server can provide information about authentication or related response metadata through headers.
HTTP/1.1 401 Unauthorized
Content-Type: application/json
The actual authentication flow depends on the API design.
React Native
↓
HTTP Request
↓
PHP REST API
↓
Process Request
↓
HTTP Status
+
Response Headers
+
JSON Body
↓
React Native
↓
Read Response
The client receives the complete HTTP response and can use the information it needs.
HTTP/1.1 200 OK
Content-Type: application/json
Cache-Control: no-cache
{
"success": true,
"data": [
{
"id": 1,
"name": "Rahul"
}
]
}
The status code describes the result, the response headers describe additional information, and the JSON body contains the actual API data.
HTTP response headers provide metadata and instructions about the response returned by a REST API.
PHP REST API
↓
HTTP Status Code
↓
Response Headers
├── Content-Type
├── Cache-Control
├── ETag
└── Location
↓
JSON Response Body
↓
React Native
Understanding response headers is important before working with advanced REST APIs, caching, authentication, CORS, and mobile API integration.
Question: Which response header commonly tells the client that the response contains JSON data?