JavaScript 中怎么在接口调用中携带 Authorization 认证头-js教程-PHP中文网

javascript调用接口需手动在fetch或axios请求头中添加authorization字段，常用bearer token格式为"bearer "+token，注意空格；后端须配置cors暴露该头，禁用url或请求体传token。

javascript 中怎么在接口调用中携带 authorization 认证头

在 JavaScript 中调用接口时携带 Authorization 认证头，核心是通过 fetch 或 XMLHttpRequest 的请求头（headers）手动添加该字段。最常见的是 Bearer Token 方式，值格式为 Bearer <token></token>。

使用 fetch 添加 Authorization 头

这是现代前端最常用的方式。注意：必须显式设置 headers 对象，并确保 Content-Type 与后端要求一致（如需传 JSON，通常要加）。

Token 一般从 localStorage、sessionStorage 或登录后返回的数据中获取
Authorization 值必须拼接成 "Bearer " + token，注意空格不能省略
如果后端用的是其他认证方案（如 Basic、API Key），格式会不同（例如 Basic base64(username:password)）

示例：

const token = localStorage.getItem('access_token');
fetch('/api/user', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log(data));

使用 axios 添加 Authorization 头

axios 提供了更简洁的配置方式，支持全局默认头或单次请求头。

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

全局设置（适合所有请求都带同一 token）：axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
单次请求设置：在 config 的 headers 中传入
也可以用拦截器统一注入，尤其适合 token 动态更新场景

拦截器示例：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

注意事项和常见问题

Authorization 头不是自动携带的，也不会被浏览器跨域预检（CORS）自动放行，后端必须明确允许该头。

后端需在 CORS 配置中暴露 Authorization：如 Express 中用 res.header('Access-Control-Expose-Headers', 'Authorization')
若用 credentials（如 cookie），mode: 'cors' 下需同时设 credentials: 'include'，但此时 Authorization 仍需手动加
Token 过期时，前端应监听 401 响应并跳转登录或刷新 token