网站导航
> 技术文档 > 常用 HTTP 请求头设置及其作用详解_浏览器请求头

常用 HTTP 请求头设置及其作用详解_浏览器请求头

网友: 技术文档 2025-07-30 13:18:12

在前后端开发中，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 ：JWT 或 OAuth 授权

    • 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-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 取决于你 发送的数据类型。

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

浏览器会自动设置：

 //设置请求头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 需要你自己设
网络标签：

相关问题