React中带Authorization头的GET请求验证JWT时返回无效令牌问题

问题描述 #

从localStorage获取JWT令牌后，通过Fetch请求调用API验证，始终返回“Invalid token”。但直接在代码中写死相同的令牌，请求就能正常通过；把React里的请求复制到浏览器控制台执行也能成功。

已确认以下信息：

• localStorage中存储的令牌内容正确
• 请求前确实成功获取到了令牌
• 请求头的Authorization字段看似包含正确的令牌

无法正常工作的代码 #

const token = localStorage.getItem('token'); 
fetch("http://localhost/api/checktoken.php?username=davide", { 
  method: 'GET', 
  headers:{ 
    'Content-Type': 'application/json', 
    'Authorization': "Bearer " + token, 
  }, 
})

可正常工作的代码 #

fetch(`http://localhost/api/checktoken.php?username=davide`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJvbmNvbnN1bHRpbmciLCJhdWQiOiJjbGllbnRzIiwiaWF0IjoxNzAxNTI5NjgyLCJuYmYiOjE3MDE1Mjk2OTIsImRhdGEiOnsidXNlcm5hbWUiOiJkYXZpZGUuZ2FnbGlvbmUiLCJsYW5ndWFnZSI6IkVuZyIsImVudmlyb25tZW50cyI6W3sibmFtZSI6ImVudjEifSx7Im5hbWUiOiJlbnYyIn1dfX0.iC2NntlW6rFx2s6pacSFw6Y_5ib3Bh8jhFl2-MMTX-Q`,
    },
  })

解决方案 #

1. 去除令牌首尾空白字符 #

localStorage存储的令牌可能意外带有换行、空格等空白字符，拼接后会破坏JWT的格式，导致验证失败。直接写死的令牌没有这些多余字符，所以能通过验证。

修改代码，添加trim()清理空白：

const token = localStorage.getItem('token')?.trim(); // 清除首尾空白
fetch("http://localhost/api/checktoken.php?username=davide", {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  },
})

2. 检查令牌是否被序列化存储 #

如果存储令牌时用了JSON.stringify，取出的令牌会带有双引号（比如"eyJ0eXAi..."），这会导致JWT格式错误。此时需要用JSON.parse解析：

// 若存储时执行了JSON.stringify(token)，取出时需解析
const token = JSON.parse(localStorage.getItem('token'))?.trim();
fetch("http://localhost/api/checktoken.php?username=davide", {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  },
})

3. 调试实际发送的请求头 #

在浏览器开发者工具的Network面板，对比两种请求的实际请求头：

• 按F12打开开发者工具，切换到Network标签
• 触发Fetch请求，找到对应的API请求
• 查看Request Headers中的Authorization字段，复制内容和代码中写死的令牌对比
• 检查是否存在字符差异（比如多余引号、编码问题）

辅助调试代码 #

在请求前添加日志，确认令牌的实际内容：

const token = localStorage.getItem('token');
console.log('从localStorage获取的令牌:', token);
console.log('令牌长度:', token?.length);
console.log('生成的Authorization头:', `Bearer ${token}`);

// 执行请求
fetch("http://localhost/api/checktoken.php?username=davide", {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  },
})

通过日志可以直观看到令牌是否存在异常，比如长度不符、包含多余字符等。

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