网络知识篇
什么是请求头与身份验证
请求不只有"要什么"
当你发送HTTP请求时,除了告诉服务器"我要什么数据",还需要附带一些元信息——比如你是谁、你能接受什么格式、你的语言偏好等。这些元信息就放在**请求头(Headers)**里。
💡 类比:去银行取钱,你不仅要说"我要取10000元"(请求体),还要出示身份证(Authorization头)、填写取款单(Content-Type头)。
加载图表中...
常见请求头
| 请求头 | 作用 | 示例值 |
|---|---|---|
Content-Type | 请求体的数据格式 | application/json |
Accept | 期望的响应格式 | application/json |
Authorization | 身份验证凭证 | Bearer sk-abc123 |
User-Agent | 客户端信息 | Mozilla/5.0 ... |
Cookie | 本地存储的凭证 | session_id=xyz |
Accept-Language | 语言偏好 | zh-CN,en |
Origin | 请求来源 | https://mysite.com |
Content-Type 常见值
| 值 | 含义 | 场景 |
|---|---|---|
application/json | JSON 格式 | API 请求 |
application/x-www-form-urlencoded | 表单格式 | HTML 表单提交 |
multipart/form-data | 混合格式 | 文件上传 |
text/html | HTML 文档 | 网页 |
身份验证:证明"我是我"
大多数API都需要知道"你是谁"才能返回数据。常见的身份验证方式有三种:
加载图表中...
1. Cookie + Session
最传统的方式。用户登录后,服务器创建一个 Session,把 Session ID 通过 Cookie 返回给浏览器。
加载图表中...
2. Token(JWT)
现代主流方式。登录后服务器返回一个 Token(令牌),后续每次请求在 Authorization 头中携带。
加载图表中...
// 登录获取 Token
const loginRes = await fetch("/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username: "admin", password: "123456" }),
});
const { token } = await loginRes.json();
// 后续请求携带 Token
const userRes = await fetch("/api/user", {
headers: {
Authorization: `Bearer ${token}`,
},
});
3. API Key
调用第三方服务(如 OpenAI、百度地图)时常用的方式。
// 调用 OpenAI API
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer sk-your-api-key", // API Key
},
body: JSON.stringify({
model: "gpt-4",
messages: [{ role: "user", content: "Hello!" }],
}),
});
Cookie vs Token 对比
| 特性 | Cookie + Session | Token (JWT) |
|---|---|---|
| 存储位置(服务端) | 服务器存 Session | 服务器不存(无状态) |
| 存储位置(客户端) | 浏览器自动管理 | 需手动存到 localStorage |
| 跨域支持 | 较复杂 | 天然支持 |
| 适用场景 | 传统网站 | 前后端分离、移动端 |
| 安全风险 | CSRF 攻击 | XSS 攻击 |
响应头中的身份相关字段
| 响应头 | 作用 |
|---|---|
Set-Cookie | 服务器设置 Cookie |
WWW-Authenticate | 告诉客户端需要什么认证方式 |
Access-Control-Allow-Origin | 允许哪些域名跨域访问 |
🎯 AI编程小贴士:调用第三方API时遇到 401 错误,90% 的原因是 API Key 没有正确放在
Authorization请求头中。把错误信息和你的请求代码发给AI,它能快速帮你找到问题。
小结
- 请求头携带请求的元信息(格式、身份、偏好等)
- 身份验证三种主流方式:Cookie、Token(JWT)、API Key
- Token 是现代前后端分离项目的首选
- API Key 用于调用第三方服务
Authorization: Bearer xxx是最常见的认证头格式