在前后端开发中，HTTP 请求是最基础也是最核心的通信方式之一。而在发送请求时，请求头（Headers）起到了至关重要的作用。合理设置请求头，不仅能确保客户端和服务端顺利通信，还能提高接口的安全性和兼容性
一、什么是请求头（Request Headers）？
请求头是 HTTP 请求中的一部分，位于请求行之后。它们向服务器传递客户端环境信息、身份认证、缓存机制等。比如告诉服务器你是谁、你能接受什么格式的返回、你的语言偏好等等。
二、常用请求头详解
1. Content-Type
作用：是一个 HTTP 头字段，用来说明请求或响应中的实体数据（body）的格式。换句话说，它告诉服务器（或客户端）：“我发来的数据是什么类型，你要怎么解析它”。
它既可以出现在请求头中（如 POST 请求发送数据），也可以出现在响应头中（如服务器返回一个图片、HTML 或 JSON 数据时）。
二、常见的 Content-Type 类型（MIME 类型：媒体类型）
类型说明典型用途application/json以 JSON 格式传输数据前后端通信、API 接口application/x-www-form-urlencoded表单数据，键值对，用 & 拼接HTML 表单默认格式multipart/form-data适用于包含文件上传的表单文件上传text/plain纯文本测试或调试text/htmlHTML 文本页面返回或内容渲染application/xmlXML 格式数据早期 SOAP 接口或特殊服务application/octet-stream二进制流（任意文件）下载、上传二进制数据
示例：
Content-Type: application/json
2. Accept
作用：告知服务器，客户端希望接收的数据格式。
常见值：
application/json：期望返回 JSON 格式数据
text/html：期望返回 HTML 页面
*/*：接受任意格式（不推荐）
示例：
Accept: application/json
3. Authorization
作用：用于认证，携带访问令牌或账号信息，告诉服务器“我有权限访问这个资源”。
常见值：
Bearer
Basic
示例：
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6...
4. User-Agent
作用：标识客户端的类型和操作系统信息。服务器可以据此做兼容性处理。
示例：
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ...
5. Referer
作用：告知服务器，当前请求是从哪个页面跳转过来的，常用于防盗链或统计来源。
示例：
Referer: https://www.example.com/page
6. Cookie
作用：携带客户端的 Cookie 信息，保持用户会话状态。
示例：
Cookie: sessionId=abc123; theme=dark
7. Accept-Language
作用：指定客户端希望接收的语言，用于国际化（i18n）。
示例：
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
8. Cache-Control
作用：控制请求或响应的缓存行为。
常见值：
no-cache：不使用缓存，重新验证
no-store：完全不缓存
max-age=3600：资源缓存 1 小时
示例：
Cache-Control: no-cache
9. Host
作用：指定目标服务器的域名，尤其在虚拟主机环境中用于区分不同服务。
示例：
Host: www.example.com
10. Origin
作用：标识请求的来源域名，用于 CORS 跨域资源共享验证。
示例：
Origin: https://frontend.example.com
三、请求头的设置方式
在前端开发中，最常见的设置请求头方式是通过 fetch 或 axios：
使用 axios 示例：
axios.post('/api/data', data, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
'Accept-Language': 'zh-CN'
}
});
使用 fetch 示例：
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify(data)
});
四、总结与建议
请求头常用场景是否必需Content-TypePOST、PUT 请求体✅ 是Accept响应内容协商✅ 建议使用Authorization认证授权✅ 若需认证User-Agent客户端识别❌ 可选Referer来源跟踪、反盗链❌ 可选Cookie会话状态✅ 若有登录Accept-Language多语言支持❌ 可选Cache-Control控制缓存行为❌ 可选Origin跨域请求✅ 浏览器自动发送
正确设置请求头，可以提升接口的安全性、稳定性和用户体验。理解每一个请求头的作用，也是成为一名合格 Web 开发者的必修课。
但是我还有个疑问？为什么有时候我们需要手动设置请求头，有时候又不需要？
一、首先明确：请求头的作用
请求头（Request Headers） 是浏览器或客户端在发请求时发送的一些“附加信息”，告诉服务器请求的环境、格式、权限等内容。
二、哪些请求头是浏览器自动设置的？
✅ 1. 基础通用头：自动添加
如：
Header示例值用途User-Agent浏览器标识服务端判断来源Accepttext/html, application/json接受哪些响应格式Accept-Languagezh-CN,zh;q=0.9语言偏好Hostexample.com目标主机Connectionkeep-alive长连接
✅ 你不用管，浏览器或 axios 会自动帮你加上这些。
✅ 2. Content-Type（部分场景自动）
是否需要手动设置 Content-Type 取决于你 发送的数据类型。
情况一：浏览器原生
浏览器会自动设置：
//设置请求头
Content-Type: application/x-www-form-urlencoded
情况二：fetch、axios 手动发 JSON 请求（需要手动设置）
fetch('/api', {
method: 'POST',
body: JSON.stringify({ name: '张三' }),
headers: {
'Content-Type': 'application/json' // 必须手动设定
}
})
情况三：使用 FormData 上传文件（不要设置！自动加）
const formData = new FormData();
formData.append('file', file);
fetch('/upload', { method: 'POST', body: formData });
// ❌ 不要手动设置 Content-Type，浏览器会自动附带 boundary 边界信息
三、总结：何时需要“自己设置请求头”？
场景是否要手动设置请求头？原因原生表单提交❌ 不需要浏览器自动添加axios.post 发送 JSON✅ 需要默认不是 JSONfetch + JSON 字符串体✅ 需要否则服务器无法解析上传文件用 FormData❌ 不需要浏览器自动处理 boundary调试接口工具（Postman）✅ 需要一切手动配置设置 Token 权限认证✅ 需要Authorization 需要你自己设