在JavaScript中为请求头添加Authorization token以调用API获取数据

fetch的第二个入参是请求配置对象，你可以在该对象中添加headers字段来自定义请求头，具体实现步骤和代码如下：

• 首先构造请求头配置，把需要的X-Authorization字段写入配置
• 将headers配置放入fetch的第二个参数中，按原有逻辑处理响应即可

完整代码示例 #

// 替换为你实际的Token值，若为用户登录后生成的动态Token建议从sessionStorage/localStorage中读取
const API_TOKEN = '你的实际Token字符串';

async function requestApi() {
  try {
    const res = await fetch('替换为你的API接口地址', {
      // 请求方法根据你的实际需求调整为GET/POST/PUT等
      method: 'GET',
      headers: {
        'X-Authorization': `Bearer Token ${API_TOKEN}`,
        // 若为POST请求传JSON格式参数可补充下面的Content-Type，GET请求可删除该行
        'Content-Type': 'application/json'
      },
      // POST请求需要传参时添加下面的body配置，GET请求可删除
      // body: JSON.stringify({param1: 'xxx', param2: 'xxx'})
    });

    if (!res.ok) {
      throw new Error(`请求异常，状态码：${res.status}`);
    }
    const jsonData = await res.json();
    // 这里编写你的业务逻辑处理返回的jsonData
    console.log('接口返回数据：', jsonData);
    return jsonData;
  } catch (err) {
    // 这里处理请求异常逻辑
    console.error('接口调用失败：', err);
  }
}

// 调用接口方法
requestApi();

注意：不要将固定Token硬编码在前端公开代码中，用户登录后获取的动态Token建议存储在sessionStorage或localStorage中，使用时再读取，避免Token泄露引发安全问题。

内容的提问来源于stack exchange，提问作者Solartech