React项目调用GitHub API返回401错误求助

问题核心 #

• 基于React开发的GitHub用户搜索网站，本地开发阶段调用GitHub API一切正常，但部署后搜索用户时返回401错误
• 已尝试操作：更换GitHub Token、删除误传的env文件后重新上传，问题仍未解决
• 关键报错信息：

  AxiosError: Request failed with status code 401
  请求地址：GET https://api.github.com/search/users?q=brad
  

排查步骤 #

1. 验证Vercel环境变量配置 #

• 登录Vercel控制台，找到对应项目，进入「Settings」→「Environment Variables」
• 确认Token对应的环境变量名（如REACT_APP_GITHUB_TOKEN）已正确设置，React项目环境变量必须以REACT_APP_开头
• 点击变量右侧「Edit」，检查Token值无多余空格、换行或拼写错误
• 配置完成后必须手动触发重新部署（Vercel不会自动刷新已部署版本的环境变量）

2. 检查GitHub Token的有效性与权限 #

• 登录GitHub，进入「Settings」→「Developer settings」→「Personal access tokens」
• 确认当前使用的Token状态为「Active」，未被撤销或过期
• 检查Token权限：至少勾选repo分类下的public_repo（仅搜索公开用户/仓库无需额外权限）

3. 核对代码中Token的使用逻辑 #

• 找到项目中封装API请求的文件（如src/utils/github.js），确认请求头携带Token的格式正确：

  import axios from 'axios';
  
  const githubAPI = axios.create({
    baseURL: 'https://api.github.com',
    headers: {
      Authorization: `token ${process.env.REACT_APP_GITHUB_TOKEN}`
    }
  });
  

• 禁止在代码中硬编码Token，必须通过环境变量process.env获取
• 可临时在部署后的页面控制台执行console.log(process.env.REACT_APP_GITHUB_TOKEN)（测试后立即删除），确认环境变量是否正确加载

4. 排查Vercel构建缓存问题 #

• 进入Vercel项目「Deployments」页面，选择最新部署记录，点击「Redeploy」并勾选「Clear build cache」，强制清除旧构建缓存后重新部署

5. 确认GitHub API认证格式 #

• GitHub API的Token认证头格式为Authorization: token YOUR_TOKEN，注意是小写的token，不要误用Bearer格式

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