Angular调用GitHub API换取access_token时遭遇CORS错误求助

核心问题说明 #

你遇到的CORS错误是GitHub故意限制的，原因有两点：

1. GitHub的/login/oauth/access_token接口未配置允许前端域名的跨域响应头，浏览器同源策略会直接拦截这类请求；
2. 更关键的是，把client_secret写在前端代码里是严重的安全漏洞——任何人都能通过查看源码获取你的密钥，进而滥用你的GitHub应用权限。

前端无法直接绕过这个限制并保证安全，必须通过后端服务器中转请求，这是符合OAuth 2.0规范的唯一可行方案。

正确解决方案 #

1. 后端中转请求（以Node.js/Express为例） #

在后端部署一个简单接口，接收前端传来的code，用后端安全存储的client_id和client_secret调用GitHub接口获取token，再返回给前端：

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// 替换为你的GitHub应用信息，建议用环境变量管理
const CLIENT_ID = '你的client_id';
const CLIENT_SECRET = '你的client_secret';

app.post('/api/github/get-token', async (req, res) => {
  const { code, state, redirect_uri } = req.body;

  try {
    const response = await axios.post('https://github.com/login/oauth/access_token', {
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      code,
      redirect_uri,
      state
    }, {
      headers: { 'Accept': 'application/json' }
    });
    res.json(response.data);
  } catch (err) {
    res.status(err.response?.status || 500).json(err.response?.data || { message: '请求失败' });
  }
});

app.listen(3001, () => console.log('后端服务运行在3001端口'));

2. 修改前端代码 #

前端不再直接请求GitHub接口，改为调用自己的后端接口，且不再传递敏感的client_id和client_secret：

const url = `/api/github/get-token`;

const body = {
  code: code,
  redirect_uri: this.redirectUri,
  state: state
};

const options = {
  headers: new HttpHeaders({
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }),
};

return this.http.post(url, body, options);

3. 本地开发的Angular代理配置（仅测试用） #

如果只是本地开发临时测试，可以配置Angular代理转发请求，但绝对不能用于生产环境（仍存在密钥泄露风险）：

在项目根目录创建proxy.conf.json：

{
  "/api": {
    "target": "http://localhost:3001",
    "secure": false
  }
}

在angular.json的serve配置中添加代理：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "proxy.conf.json"
  }
}

关键提醒 #

• 永远不要在前端代码中存储client_secret，这会直接导致你的GitHub应用权限泄露；
• 后端存储client_secret时，要通过环境变量等安全方式管理，禁止硬编码在代码中；
• GitHub的authorization code flow流程要求必须通过后端完成，这是官方规范强制要求的安全设计。

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