使用GitHub API获取用户数据时遭遇‘Bad Credentials’错误求助

排查与修复步骤 #

• 修正Authorization头格式
  客户端拼接令牌时，可能因令牌前后存在空格导致格式无效。给令牌添加trim()处理：

  // 客户端代码修改
  "Authorization": "Bearer " + localStorage.getItem('accessToken').trim()
  

• 添加错误捕获与调试
  当前代码未处理GitHub API的错误响应，无法定位具体问题。修改服务器端代码，捕获并输出错误详情：

  // 服务器端代码优化
  app.get('/getUserData', async function (req, res) {
    try {
      const authHeader = req.get('Authorization');
      console.log('Received auth header:', authHeader); // 调试用，确认头格式
  
      const ghResponse = await fetch("https://api.github.com/user", {
        method: 'GET',
        headers: { 'Authorization': authHeader }
      });
  
      if (!ghResponse.ok) {
        const errorDetails = await ghResponse.json();
        console.error('GitHub API Error:', errorDetails);
        return res.status(ghResponse.status).json(errorDetails);
      }
  
      const userData = await ghResponse.json();
      res.json(userData);
    } catch (err) {
      console.error('Request Failed:', err);
      res.status(500).json({ error: 'Failed to fetch user data' });
    }
  });
  

• 确认OAuth授权Scope
  必须在GitHub OAuth授权请求中指定user权限范围，否则令牌无访问用户数据的权限。授权URL需包含参数：

  scope=user
  

• 统一异步代码风格
  避免async/await与.then()混用，减少逻辑混乱。修改客户端代码为纯async/await：

  // 客户端代码优化
  async function getUserData() {
    try {
      const accessToken = localStorage.getItem('accessToken').trim();
      const response = await fetch("http://localhost:4000/getUserData", {
        method: "GET",
        headers: { "Authorization": "Bearer " + accessToken }
      });
  
      if (!response.ok) {
        const errorData = await response.json();
        console.error('Server Error:', errorData);
        return;
      }
  
      const data = await response.json();
      setUserData(data);
    } catch (err) {
      console.error('Fetch Error:', err);
    }
  }
  

额外验证 #

• 用curl直接测试令牌有效性，排除前端/后端转发问题：

  curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" https://api.github.com/user
  

• 确认令牌未被用户撤销或篡改，可在GitHub开发者设置中查看令牌状态。

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