JavaScript中可用fetch或XMLHttpRequest在Authorization请求头中携带Bearer Token实现身份认证，需匹配后端要求的请求方法与Content-Type，跨域时服务端须配置Access-Control-Allow-Headers允许Authorization字段。
在 JavaScript 中使用 Ajax 发送请求时，可以通过 XMLHttpRequest 或 fetch 设置请求头（Headers），将 Token（如 JWT）添加到 Authorization 字段中，实现服务端身份认证。
使用 fetch 设置 Authorization 请求头
fetch 是现代浏览器推荐的异步请求方式，设置 Token 很直观：
- Token 通常放在
Authorization请求头中，格式为Bearer <token> - 需确保请求方法（如 POST）、Content-Type 等与后端要求一致
- 注意：如果跨域，服务端必须允许该请求头（即响应中含
Access-Control-Allow-Headers: Authorization）
示例代码：
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // 从 localStorage 或其他地方获取
fetch('/api/user/profile', {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(data => console.log(data));
使用 XMLHttpRequest 设置请求头
XMLHttpRequest 需在 open() 之后、send() 之前调用 setRequestHeader()：
立即学习“Java免费学习笔记（深入）”；
- 不能在
open()前设置，否则会报错 - 若使用自定义请求头（如
X-Auth-Token），服务端需明确允许该字段 - 对于简单请求（如 GET + JSON），部分浏览器可能自动省略预检（OPTIONS），但带 Token 的请求通常触发预检
示例代码：
const xhr = new XMLHttpRequest();
const token = localStorage.getItem('auth_token');
xhr.open('GET', '/api/orders');
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
常见 Token 存储与读取方式
前端通常把 Token 存在以下位置，请求前取出即可：
-
localStorage：易读取，但存在 XSS 风险；适合非敏感场景 -
sessionStorage：页面关闭即失效，适合单会话临时 Token - 内存变量（如模块私有变量）：最安全，但刷新即丢失，需配合登录态持久化方案
- HTTP-only Cookie：无法被 JS 读取，适用于后端自动携带的认证，不适用于需要 JS 主动传 Token 的 Ajax 场景
注意事项与调试建议
Token 认证失败常因以下原因，可逐项排查：
- 请求头名写错，例如写成
authorization（小写）——HTTP 头名不区分大小写，但建议统一首字母大写保持可读性 - Token 过期或格式错误，服务端返回 401；可在拦截响应时统一处理跳转登录页
- 跨域请求未配置 CORS，浏览器控制台提示“Request header field authorization is not allowed”，需后端添加对应响应头
- fetch 默认不带 Cookie，若 Token 存于 Cookie 且需自动发送，要加
credentials: 'include'，但此时Authorization头通常不与 Cookie 方案混用
