搭建网页获取Github OAuth Access Token：已获Code但无法获取Token

你已经成功拿到授权code，说明OAuth的第一步是走通的，卡在了换取access_token的环节，咱们一步步拆解排查：

1. 先确认本地服务器的正确性 #

你用的python -m http.server命令是没问题的（如果是Python 2环境才需要换成python -m SimpleHTTPServer，现在主流都是Python 3，这个命令完全ok），只要你能正常访问http://localhost:8000，且GitHub应用里的回调URL和这个地址完全一致，这部分就没毛病。

2. 重点检查Ajax POST请求的细节（最容易踩坑） #

GitHub的token接口对请求格式要求很严格，几个关键细节一定要注意：

• 必须指定请求头Accept: application/json：如果没加这个，GitHub可能返回HTML格式的错误页面，而非JSON数据，直接导致前端解析失败
• 参数必须用x-www-form-urlencoded格式发送：绝对不能用JSON格式提交！哪怕你设置了contentType: "application/json"也不行，必须用表单键值对的格式传递参数
• 必填参数一个都不能少：必须包含client_id、client_secret、code、redirect_uri，而且redirect_uri要和你在GitHub应用后台填写的完全一致（包括协议、域名、端口，不能有任何差异）

给你一个正确的jQuery Ajax示例参考：

$.ajax({
  url: 'https://github.com/login/oauth/access_token',
  method: 'POST',
  headers: {
    'Accept': 'application/json'
  },
  data: {
    client_id: '你的GitHub应用Client ID',
    client_secret: '你的GitHub应用Client Secret',
    code: '前端拿到的授权code',
    redirect_uri: 'http://localhost:8000'
  },
  success: function(res) {
    console.log('获取到的Access Token:', res.access_token);
  },
  error: function(xhr, status, err) {
    // 打印完整错误信息，方便排查
    console.log('错误响应内容:', xhr.responseText);
  }
});

3. 额外排查点 #

• code是否过期/已使用：GitHub的授权code只能使用一次，用过就失效了，如果你重复用同一个code请求，肯定会失败
• Client Secret是否正确：别不小心把Client ID当成Secret填进去了，这俩是完全不同的东西
• 跨域相关？：其实GitHub的token接口是支持CORS的，但如果请求格式错误，有时候会被浏览器误判为跨域问题，所以先把上面的请求格式调对再说

临时测试技巧 #

如果还是搞不定，建议先用Postman或者curl直接发送请求测试：

curl -X POST https://github.com/login/oauth/access_token \
  -H "Accept: application/json" \
  -d "client_id=你的Client ID" \
  -d "client_secret=你的Client Secret" \
  -d "code=拿到的code" \
  -d "redirect_uri=http://localhost:8000"

如果这个请求能成功拿到token，那问题肯定出在你的Ajax代码里；如果这个也失败，那就要去检查GitHub应用的配置或者code的有效性了。

最后提醒一句：绝对不要把Client Secret写在前端代码里！你现在本地测试没问题，但上线后必须把换取token的逻辑放在后端服务里，前端只负责拿到code传给后端，由后端去请求GitHub的token接口，不然Secret泄露会导致你的GitHub应用被滥用。

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