React中使用Axios带Token发起Get请求遇401错误（Token为null）

先定位Token为空的核心原因 #

• 未完成Token存储：检查登录成功的流程里，是否执行了localStorage.setItem("token", 你的有效Token值)，这一步是前提——没有存储自然读不到。
• 键名匹配问题：你读取用的键是"token"，确认存储时用的是完全一致的键名（大小写敏感，别写成"Token"或"TOKEN"）。
• 浏览器限制：如果前端和WordPress不在同一域名，隐私模式下浏览器会限制localStorage读写，先关闭隐私模式测试；同时要确保WordPress配置了正确的CORS规则，允许前端域名的请求。
• Token被清除/过期：用户手动清了缓存，或者Token本身过期，需要重新触发登录流程获取新Token。

修复后的请求示例（确保Token有效时再发送） #

let token = localStorage.getItem("token");
if (token) {
  axios.get('https://你的WordPress域名/wp-json/wp/v2/posts', {
    headers: {
      // 若用JWT认证
      'Authorization': `Bearer ${token}`
      // 若用应用密码，替换为：'Authorization': 'Basic ' + btoa('用户名:应用密码')
    }
  })
  .then(res => console.log(res.data))
  .catch(err => console.error('请求失败:', err));
} else {
  console.log('Token不存在，请先登录');
  // 这里可添加跳转到登录页的逻辑
}

额外注意点 #

• WordPress认证配置：如果用JWT，要安装JWT Authentication for WP REST API插件，并且在wp-config.php里设置JWT_SECRET_KEY；如果用应用密码，必须在HTTPS环境下开启该功能。
• 调试技巧：登录成功后立刻打印localStorage.getItem("token")确认存储成功，请求前再打印一次，排查是否在存储到请求的过程中Token被意外清除。

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