API删除接口401未授权问题求助

1. 验证token的存储与有效性 #

• 打开浏览器开发者工具（F12）→ Application → LocalStorage，确认存储的token键名与后端要求完全匹配（注意大小写，比如后端要求access_token而非token）。
• 在控制台解码token（仅适用于未加密的JWT），检查过期时间与权限信息：

  const token = localStorage.getItem('token');
  if (token) {
    const payload = JSON.parse(atob(token.split('.')[1]));
    console.log('Token是否过期:', payload.exp * 1000 > Date.now());
    console.log('Token权限信息:', payload);
  }
  

2. 检查请求中token的携带格式 #

后端通常要求token通过Authorization头传递，格式为Bearer <token>，需确认删除请求的配置：

• 检查代码中是否正确读取localStorage的token，避免拼写错误（如localStorage.getItem('Token')大小写不匹配）。
• 打开开发者工具→ Network，找到删除请求，查看Request Headers中的Authorization字段是否符合Bearer xxxxxx格式。
• 若使用fetch，确保请求头配置正确：

  fetch(`/api/delete/${id}`, {
    method: 'DELETE',
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`,
      'Content-Type': 'application/json'
    }
  });
  

3. 核对后端API的认证规则 #

• 对照API文档，确认删除接口是否需要特定权限（如管理员角色），即使token有效，权限不足也会返回401/403。
• 确认API文档中token的传递位置要求：部分后端仅接受Header中的token，或要求放在URL参数、请求体中。

4. 排查跨域与请求拦截问题 #

• 若为跨域请求，确认后端是否配置Access-Control-Allow-Headers包含Authorization，否则浏览器会拦截自定义请求头。
• 添加缓存控制头避免请求缓存：

  headers: {
    'Authorization': `Bearer ${token}`,
    'Cache-Control': 'no-cache'
  }
  

5. 检查token的生命周期与有效性 #

• 确认token是否过期：登录时返回的token通常包含exp字段，对比当前时间判断是否失效。
• 排查是否存在其他操作（如重新登录、修改密码）导致旧token被后端失效。

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