JavaScript 请求头
在网络通信中,HTTP请求头(Headers)承载着客户端和服务器之间交换的元数据信息,是网络请求中不可或缺的组成部分。本文将帮助你全面了解JavaScript中如何处理请求头,以及它们在实际开发中的重要应用。
什么是请求头?
HTTP请求头是客户端发送到服务器的请求中包含的一系列键值对,用于传递有关请求或客户端本身的附加信息。
请求头携带了诸如浏览器类型、认证信息、内容类型等元数据,帮助服务器正确处理请求。
常见的HTTP请求头
在开始学习如何操作请求头之前,让我们先了解一些常见的请求头:
Content-Type
: 指定请求体的媒体类型Authorization
: 包含用于验证用户身份的凭证User-Agent
: 标识发起请求的客户端应用程序Accept
: 指定客户端能够接受的内容类型Accept-Language
: 指定客户端首选的语言Cookie
: 包含先前由服务器设置的HTTP cookieCache-Control
: 指定请求和响应中的缓存机制
使用XMLHttpRequest设置请求头
使用传统的XMLHttpRequest对象,你可以通过setRequestHeader()
方法设置请求头:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer your-token-here');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
setRequestHeader()
方法必须在 open()
之后、send()
之前调用,否则会抛出错误。
使用Fetch API处理请求头
现代JavaScript应用更多地使用Fetch API来处理网络请求。使用Fetch设置请求头非常直观:
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-token-here',
'X-Custom-Header': 'Custom Value'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
使用Headers对象
Fetch API提供了一个专门的Headers
对象,使请求头的操作更加灵活:
// 创建一个新的Headers对象
const headers = new Headers();
// 添加头信息
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer your-token-here');
// 检查、获取和设置头信息
if (headers.has('Content-Type')) {
console.log(headers.get('Content-Type')); // 输出: application/json
}
// 使用headers对象发起请求
fetch('https://api.example.com/data', {
method: 'GET',
headers: headers
})
.then(response => response.json())
.then(data => console.log(data));
Headers对象提供了以下方法:
append()
: 添加一个新的键值对delete()
: 删除指定的头信息get()
: 获取指定头信息的值has()
: 检查是否存在指定的头信息set()
: 设置或替换指定的头信息
使用Axios处理请求头
Axios是一个流行的HTTP客户端库,它提供了一个简洁的API来处理请求头:
// 全局默认请求头
axios.defaults.headers.common['Authorization'] = 'Bearer your-token-here';
axios.defaults.headers.post['Content-Type'] = 'application/json';
// 特定请求的头信息
axios.get('https://api.example.com/data', {
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept-Language': 'zh-CN'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
常见应用场景
1. 内容协商
通过请求头告诉服务器客户端首选的数据格式:
fetch('https://api.example.com/data', {
headers: {
'Accept': 'application/json',
'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8'
}
})
.then(response => response.json())
.then(data => console.log(data));
2. 认证和授权
通过请求头传递身份验证信息:
fetch('https://api.example.com/protected-data', {
headers: {
'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Authentication failed');
}
return response.json();
})
.then(data => console.log(data));
3. 缓存控制
使用请求头控制缓存行为:
fetch('https://api.example.com/data', {
headers: {
'Cache-Control': 'no-cache',
'Pragma': 'no-cache'
}
})
.then(response => response.json())
.then(data => console.log(data));
4. 跨域资源共享(CORS)
当你需要发送凭证到启用了CORS的不同域时:
fetch('https://api.different-domain.com/data', {
credentials: 'include', // 包含凭证
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => console.log(data));
5. 自定义请求头
有时候API需要特定的自定义请求头:
fetch('https://api.example.com/data', {
headers: {
'X-API-Key': 'your-api-key',
'X-Client-ID': 'your-client-id'
}
})
.then(response => response.json())
.then(data => console.log(data));
自定义请求头通常以X-
前缀开头,不过这只是一种惯例,而非规范要求。
实际案例:构建一个带请求头的天气API查询应用
下面是一个使用请求头访问天气API的简单示例:
// 天气API查询函数
async function getWeather(city) {
try {
const response = await fetch(`https://api.weatherapi.com/v1/current.json?q=${city}`, {
method: 'GET',
headers: {
'X-API-Key': 'your-api-key-here',
'Accept': 'application/json',
'Accept-Language': 'zh-CN'
}
});
if (!response.ok) {
throw new Error(`Weather API error: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Failed to fetch weather data:', error);
throw error;
}
}
// 使用该函数
document.getElementById('weatherButton').addEventListener('click', async () => {
const city = document.getElementById('cityInput').value;
try {
const weatherData = await getWeather(city);
displayWeather(weatherData);
} catch (error) {
showError(error.message);
}
});
// 显示天气信息
function displayWeather(data) {
const weatherDiv = document.getElementById('weatherResult');
weatherDiv.innerHTML = `
<h3>当前天气: ${data.location.name}</h3>
<p>温度: ${data.current.temp_c}°C</p>
<p>天气状况: ${data.current.condition.text}</p>
<p>风速: ${data.current.wind_kph} km/h</p>
`;
}
// 显示错误
function showError(message) {
const weatherDiv = document.getElementById('weatherResult');
weatherDiv.innerHTML = `<p class="error">错误: ${message}</p>`;
}
对应的HTML:
<div class="weather-app">
<h2>天气查询</h2>
<div class="input-group">
<input type="text" id="cityInput" placeholder="输入城市名称" />
<button id="weatherButton">查询天气</button>
</div>
<div id="weatherResult"></div>
</div>
获取响应头
除了设置请求头,有时我们也需要获取服务器的响应头信息:
使用XMLHttpRequest获取响应头
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// 获取所有响应头
const allHeaders = xhr.getAllResponseHeaders();
console.log(allHeaders);
// 获取特定响应头
const contentType = xhr.getResponseHeader('Content-Type');
console.log('Content-Type:', contentType);
}
};
xhr.send();
使用Fetch API获取响应头
fetch('https://api.example.com/data')
.then(response => {
// 获取特定响应头
console.log('Content-Type:', response.headers.get('Content-Type'));
// 遍历所有响应头
response.headers.forEach((value, name) => {
console.log(`${name}: ${value}`);
});
return response.json();
})
.then(data => console.log(data));
请求头相关的安全考虑
在处理请求头时,需要注意一些安全方面的考虑:
- 敏感信息: 避免在请求头中包含敏感信息,除非使用HTTPS加密传输。
- CORS限制: 浏览器对某些请求头有严格的CORS限制,如
Authorization
、Cookie
等。 - 预检请求: 含有自定义请求头的跨域请求可能触发预检请求(OPTIONS)。
永远不要在请求头中明文传输密码或API密钥,除非使用HTTPS连接。即使如此,最佳实践是使用适当的认证机制(如OAuth)而不是原始凭证。
总结
请求头是HTTP通信的关键组成部分,掌握如何在JavaScript中设置和使用请求头对于开发现代Web应用至关重要。通过本文,我们学习了:
- 请求头的基本概念和常见请求头
- 使用不同技术(XMLHttpRequest, Fetch API, Axios)设置请求头
- 实际应用场景和具体示例
- 获取响应头的方法
- 处理请求头时的安全注意事项
通过合理使用请求头,你可以更好地控制客户端与服务器之间的通信,实现更复杂的交互需求。
练习
- 创建一个函数,使用Fetch API发送带有认证信息的请求。
- 实现一个简单的缓存控制机制,使用请求头确保每次请求都获取最新数据。
- 创建一个小应用,使用自定义请求头与API通信,并处理可能的CORS问题。
推荐资源
通过这些练习和资源,你将能够更熟练地在JavaScript应用中使用请求头,提升你的网络请求处理能力。