在 Fetch API 中发送自定义请求头（如 Authorization）携带 Token，关键在于正确设置 headers 选项并按 Bearer 格式构造值，同时匹配 credentials 策略；需校验 Token 非空、清理空格、检查跨域响应头配置。
在 Fetch API 中发送自定义请求头（如 Authorization）携带 Token，关键在于正确设置 headers 选项，并根据认证方式（如 Bearer、Bearer Token、自定义前缀）构造值。同时需注意凭证（credentials）策略是否匹配后端要求。
设置 Authorization 请求头
大多数 JWT 或 API Token 使用 Authorization: Bearer <token></token> 格式。需将 Token 字符串拼入 headers 对象：
- 确保 Token 是字符串（不是对象或未解码的 base64）
- 不要手动添加引号，
"Bearer abc123"是合法值，但写成"Bearer 'abc123'"会出错 - 推荐从 localStorage、sessionStorage 或变量中安全读取 Token
完整 fetch 示例（含 credentials）
若后端需要 Cookie 或 Token 双重验证，或接口部署在不同域名下，需显式控制 credentials：
const token = localStorage.getItem('auth_token');
fetch('/api/profile', {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
// credentials 决定是否发送 Cookie 和是否允许响应中暴露敏感头
credentials: 'include' // 或 'same-origin'、'omit'
});
注意：当使用 credentials: 'include' 时，后端必须响应 Access-Control-Allow-Origin 具体域名（不能是 *），否则浏览器会拒绝响应。
立即学习“Java免费学习笔记（深入）”；
处理 Token 过期与错误响应
仅发送 Token 不够，还需检查响应状态并做容错：
- 401 响应通常表示 Token 无效或过期，可跳转登录页或刷新 Token
- 建议统一封装 fetch 函数，在 headers 注入前校验 token 是否存在且非空
- 避免在 headers 中传入
undefined或null，会导致请求头值为"Bearer undefined"
常见错误排查
如果 Token 发送失败，优先检查以下几点：
- 浏览器开发者工具 Network 标签页中，查看 Request Headers 是否真实包含
Authorization - 确认 Token 字符串没有前后空格（可用
.trim()清理） - 确认后端接收的 Header 名大小写正确（HTTP Header 名不区分大小写，但某些代理或框架可能敏感）
- 跨域场景下，确认后端已配置
Access-Control-Allow-Headers: Authorization
