Chrome控制台获取请求头失败，求正确方法及存储位置

可能的操作误区 #

• 混淆了请求头存储逻辑：请求头里的accessToken这类凭证不一定会存在localStorage或sessionStorage中，直接瞄准这两个位置查找本身就可能找错了方向。
• 控制台调用时机有误：如果页面未完成初始化，或者凭证是在后续交互/请求后才生成存储的，提前执行localStorage.getItem('accessToken')自然拿不到预期值。

正确获取请求头值的方法 #

• 抓包查看真实请求头：打开Chrome开发者工具（F12），切换到Network面板，触发目标GET请求，找到对应请求条目后，查看Headers标签下的Request Headers，直接从这里复制需要的请求头值。
• 拦截请求实时查看：在控制台通过拦截请求逻辑获取，比如：

  // 拦截fetch请求
  const originalFetch = window.fetch;
  window.fetch = function(...args) {
    console.log('当前请求头:', args[1]?.headers);
    return originalFetch.apply(this, args);
  };
  

  触发目标请求后，就能在控制台看到完整的请求头信息。

请求头凭证可能的存储位置 #

• Cookie：多数网站会把accessToken这类凭证存在Cookie中，可在Chrome开发者工具的Application面板→Cookies→对应域名下查看，也能直接在控制台执行document.cookie获取。
• 内存变量：部分单页应用会把凭证存在内存全局变量或状态管理工具（如Redux、Vuex）里，可在控制台尝试访问自定义全局变量（比如window.appState这类命名），或在Sources面板搜索关键词定位。
• IndexedDB：少数网站会用IndexedDB存储持久化数据，可在Application面板→IndexedDB里查看对应数据库和存储对象。
• Service Worker缓存：极个别场景下，凭证可能存在Service Worker的缓存中，可在Application面板→Service Workers里查看相关缓存内容。

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