JavaScript中Ajax发送自定义请求头与Token需分方式处理：fetch通过headers对象配置，XHR用setRequestHeader在open后、send前设置；Content-Type须与数据格式严格匹配，表单数据禁用手动设置；跨域时服务端须配置Access-Control-Allow-Headers。
在 JavaScript 中使用 Ajax 发送请求时，携带自定义请求头（如 Content-Type）和认证 Token（如 Bearer Token），核心是通过配置 headers 选项实现。不同 Ajax 方式写法略有差异，但逻辑一致。
使用 Fetch 携带请求头与 Token
Fetch 是现代推荐方式，需手动设置 headers 对象，并确保 method 和 body（如需）匹配内容类型。
- Token 通常放在
Authorization请求头，格式为Bearer <token> -
Content-Type根据数据类型设置：JSON 用application/json，表单用application/x-www-form-urlencoded或multipart/form-data - 注意：Fetch 默认不带 Cookie，如需携带，要加
credentials: 'include'
示例：
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';
fetch('/api/user', {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
});
使用 Axios 携带请求头与 Token
Axios 更简洁，支持全局默认配置和请求级覆盖，自动序列化 JSON 并设置对应头。
立即学习“Java免费学习笔记（深入）”；
- 全局设置 Token：
axios.defaults.headers.common['Authorization'] = 'Bearer xxx' - 单次请求设置：
headers选项直接传入，会合并覆盖默认值 - 发送表单数据时，用
FormData对象，Axios 会自动设置Content-Type（含 boundary）
示例：
axios.get('/api/profile', {
headers: {
Authorization: `Bearer ${token}`
}
});
XMLHttpRequest 手动设置请求头
原生 XHR 需调用 setRequestHeader()，且必须在 open() 之后、send() 之前调用。
- 不能设置某些受限头（如
Cookie、Connection），浏览器会忽略或报错 - 若接口需要凭证（如 Cookie 或 Token），需设
withCredentials = true - JSON 数据需先
JSON.stringify()，再手动设Content-Type
示例：
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/login');
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.withCredentials = true;
xhr.send(JSON.stringify({ email: 'user@example.com' }));
常见注意事项
Token 和请求头不是“设了就一定生效”，还需注意服务端是否允许、前端是否被跨域拦截。
- CORS 场景下，服务端必须在响应头中包含
Access-Control-Allow-Headers（如Authorization），否则浏览器会拦截 - Token 过期或格式错误，服务端返回 401，前端应捕获并跳转登录页
- 避免硬编码 Token，建议从 localStorage/sessionStorage 安全读取，或使用封装的请求函数统一注入
- 敏感 Token 不要打印到控制台，也不要在 URL 中传递（如 query 参数）
不复杂但容易忽略。
