Angular中GET请求携带请求头出现401未授权问题

这种明明存了令牌但请求还是返回401的情况我也遇到过几次，大概率是令牌没正确带上或者格式不对，咱们一步步排查：

1. 先确认令牌真的在Local Storage里 #

先打开浏览器控制台（F12），切换到Console标签，输入：

localStorage.getItem('你的令牌存储键名') // 比如 localStorage.getItem('authToken')

按回车后如果返回null或者空字符串，那问题出在存储环节——登录后令牌没存进去，得先检查登录逻辑的代码。如果能返回正常的令牌字符串，再往下走。

2. 检查请求头的格式是否符合后端要求 #

绝大多数后端要求授权头的格式是 Authorization: Bearer <令牌内容>，这里有几个容易踩的坑：

• 漏写了Bearer前缀，或者后面没加空格
• 头字段名写错了（比如写成Auth而不是Authorization）

举两个常用请求库的正确写法：

用fetch的情况： #

const token = localStorage.getItem('authToken');
fetch('/api/user-list', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`, // 重点：Bearer + 空格 + 令牌
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.catch(err => console.error(err));

用axios的情况： #

const token = localStorage.getItem('authToken');
axios.get('/api/user-list', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
.then(res => console.log(res.data))
.catch(err => console.error(err));

3. 确认请求真的发送了授权头 #

打开浏览器开发者工具的Network标签，触发你的GET请求，找到对应的请求条目，查看Request Headers部分：

• 有没有Authorization这个字段？
• 字段值是不是Bearer + 你的令牌？

如果这里看不到Authorization头，可能是：

• 跨域请求的话，后端没配置CORS允许携带自定义头（需要后端设置Access-Control-Allow-Headers: Authorization）
• 代码里的请求逻辑有问题，比如头被覆盖了

4. 检查令牌是否有效/过期 #

即使令牌存在且格式正确，也可能因为过期或者被后端吊销导致401。如果是JWT令牌，你可以用本地的JWT解析工具查看exp字段（过期时间戳），对比当前时间戳确认是否过期。

5. 排查存储/读取的键名是否一致 #

登录时存令牌的键名，和请求时读取的键名必须完全一致！比如登录时写的是：

localStorage.setItem('userToken', response.data.token);

那请求时就必须用localStorage.getItem('userToken')，如果写成authToken就会拿到null，自然返回401。

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