Angular网站获取GitHub贡献SVG时遭遇CORS跨域错误求助

阿华AIGC实验室

2026-5-26

解决GitHub贡献数据跨域请求的CORS问题

嘿，这个CORS坑我踩过好多次了！先给你理清楚为啥会出现这个错误：

Failed to load https://github.com/users/kapil5harma/contributions: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://kapil5harma.netlify.com' is therefore not allowed access

浏览器的同源策略会阻止你的Netlify网站直接请求GitHub的页面——因为GitHub的这个贡献页面根本没设置Access-Control-Allow-Origin响应头，不允许其他域名跨域调用。本地用Chrome插件能正常跑，是因为插件直接绕过了浏览器的CORS检查，但这显然不是生产环境的可行方案对吧？

给你两个靠谱的解决办法，按需选：

1. 改用GitHub官方API（最推荐）

GitHub提供了支持CORS的官方API，完全可以替代直接请求贡献页面。比如你可以用这些接口获取贡献数据：

REST API：请求GET https://api.github.com/users/kapil5harma/events/public，拿到用户的公开事件数据，然后在前端统计提交、PR等贡献；如果需要日历形式的贡献数据，可以尝试GET https://api.github.com/users/kapil5harma/contributions_calendar。
GraphQL API：更灵活，能精准获取你需要的贡献统计，比如查询用户的年度贡献数据。

用官方API的好处是：完全符合浏览器的跨域规则，不用额外搭建服务，而且数据格式更规范，方便你在Angular里处理。注意未认证的API请求每小时有60次的限制，如果你的访问量不大，完全够用；如果需要更高限额，简单配置个GitHub Personal Access Token就行。

2. 搭建一个简单的代理服务（适合特殊场景）

如果你一定要获取GitHub贡献页面的原始HTML内容，那可以在Netlify上用Netlify Functions搭建一个中间代理——服务器端请求没有CORS限制，所以让代理帮你去拉GitHub的数据，再返回给你的前端。

步骤很简单：

在项目根目录创建netlify/functions/get-github-contributions.js文件，写入以下代码：

exports.handler = async (event, context) => {
  try {
    const githubResponse = await fetch('https://github.com/users/kapil5harma/contributions');
    const htmlContent = await githubResponse.text();
    return {
      statusCode: 200,
      body: htmlContent
    };
  } catch (err) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: 'Failed to fetch GitHub contributions' })
    };
  }
};