如何为Fetch GET请求添加认证请求头？请校验代码正确性

你的代码有几处明显问题，导致token无法正确携带，同时还有逻辑冗余和异步顺序问题，具体分析和修正如下：

核心问题点 #

• 请求头参数名错误：应该用headers而非header，少写了末尾的s，这会导致你设置的所有请求头（包括带token的Authorization）都不会被正确添加到请求中
• 请求头拼写错误：X-Aequseted-With拼写错误，正确写法是X-Requested-With
• 冗余请求头：GET请求没有请求体，Content-Type头完全没必要添加
• 异步处理错误：result.json()是异步方法，你没有返回它，导致无法拿到解析后的JSON数据；而且在第一个请求成功后又重复发起了一次完全相同的请求，完全多余
• 变量未声明：userAttemps和freeAttemps没有用let/const声明，会变成全局变量，容易造成变量污染
• 异步顺序问题：fetch是异步操作，你在请求完成前就调用sessionStorage.getItem，此时数据还没存入，会拿到null

修正后的代码 #

// 确保token变量已正确赋值
const token = '你的实际授权token';

fetch('https://api.github.com/users/mralexgray/repos', {
  method: 'GET',
  headers: { // 修正为正确的headers参数名
    "Accept": "application/json",
    "X-Requested-With": "XMLHttpRequest", // 修正拼写错误
    "Authorization": `Bearer ${token}` // 携带token的认证头
  }
})
.then(async (response) => {
  if (response.status === 200) {
    const data = await response.json(); // 直接解析第一次请求的响应数据
    console.log('获取到的数据:', data);
    
    // 存入sessionStorage
    sessionStorage.setItem('userAttemps', data[0].id);
    sessionStorage.setItem('freeAttemps', data[0].id);
    
    // 数据存入后再读取，确保能拿到值
    const userAttemps = sessionStorage.getItem('userAttemps');
    const freeAttemps = sessionStorage.getItem('freeAttemps');
    console.log('读取存储的值:', userAttemps, freeAttemps);
  } else {
    console.error('请求失败，状态码:', response.status);
  }
})
.catch(err => {
  console.error('请求出错:', err);
});

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