常用 HTTP 请求头设置及其作用详解

在前后端开发中，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/html	HTML 文本	页面返回或内容渲染
  application/xml	XML 格式数据	早期 SOAP 接口或特殊服务
  application/octet-stream	二进制流（任意文件）	下载、上传二进制数据

• 示例：

  Content-Type: application/json

---

2. Accept

• 作用：告知服务器，客户端希望接收的数据格式。

• 常见值：

  • application/json：期望返回 JSON 格式数据

  • text/html：期望返回 HTML 页面

  • */*：接受任意格式（不推荐）

• 示例：

  Accept: application/json

---

3. Authorization

• 作用：用于认证，携带访问令牌或账号信息，告诉服务器“我有权限访问这个资源”。

• 常见值：

  • Bearer <token>：JWT 或 OAuth 授权

  • Basic <base64(username:password)>：基础认证

• 示例：

  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-Type	POST、PUT 请求体	✅ 是
Accept	响应内容协商	✅ 建议使用
Authorization	认证授权	✅ 若需认证
User-Agent	客户端识别	❌ 可选
Referer	来源跟踪、反盗链	❌ 可选
Cookie	会话状态	✅ 若有登录
Accept-Language	多语言支持	❌ 可选
Cache-Control	控制缓存行为	❌ 可选
Origin	跨域请求	✅ 浏览器自动发送

正确设置请求头，可以提升接口的安全性、稳定性和用户体验。理解每一个请求头的作用，也是成为一名合格 Web 开发者的必修课。

但是我还有个疑问？为什么有时候我们需要手动设置请求头，有时候又不需要？

一、首先明确：请求头的作用

请求头（Request Headers） 是浏览器或客户端在发请求时发送的一些“附加信息”，告诉服务器请求的环境、格式、权限等内容。

---

二、哪些请求头是浏览器自动设置的？

✅ 1. 基础通用头：自动添加

如：

Header	示例值	用途
User-Agent	浏览器标识	服务端判断来源
Accept	text/html, application/json	接受哪些响应格式
Accept-Language	zh-CN,zh;q=0.9	语言偏好
Host	example.com	目标主机
Connection	keep-alive	长连接

✅ 你不用管，浏览器或 axios 会自动帮你加上这些。

---

✅ 2. Content-Type（部分场景自动）

是否需要手动设置 Content-Type 取决于你 发送的数据类型。

情况一：浏览器原生 <form> 提交（自动设置）

<form method="POST" action="/submit"> <input name="username" /> </form>

浏览器会自动设置：

<form method="POST" action="/submit">
  <input name="username" />
</form>

//设置请求头
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	✅ 需要	默认不是 JSON
fetch + JSON 字符串体	✅ 需要	否则服务器无法解析
上传文件用 FormData	❌ 不需要	浏览器自动处理 boundary
调试接口工具（Postman）	✅ 需要	一切手动配置
设置 Token 权限认证	✅ 需要	Authorization 需要你自己设