GitHub 响应的 React Axios Cheerio 解析

Question

我正在尝试从 Axios 发出请求以从 GitHub 检索数据。我收到一个有意义的失败错误，我想知道这是否是预期的行为，并且这种类型从客户端根本不可能，或者是否有一种方法可以发出我只是想念的这个请求：

componentDidMount() {    
    axios
      .get('https://github.com/users/lukeschlangen/contributions',{
        headers: {
          'Access-Control-Allow-Origin': '*'
        }
      })
      .then(res => {
        this.streakCounter(res);
      })
      .catch(err => console.log(err));
  }



  streakCounter(body) {
    const $ = cheerio.load(body);
    var data = [];
    $('svg').find('rect').each(function(index, element) {
        data.push({
            count: parseInt($(element).attr('data-count')),
            date: new Date($(element).attr('data-date'))
        })
    });

    var yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);

    data = data.sort(function(a, b) {
        return new Date(b.date) - new Date(a.date);
    }).filter(function(el) {
        return el.date.getTime() <= yesterday.getTime();
    });
    var streakCount = 0;
    for (var i = 0; i < data.length; i++) {
        if (data[i].count == 0) {
            break;
        }
        streakCount++
    }

    console.log('streakCount:', streakCount);

  }

我的猜测是 GitHub 可能会直接拒绝，而且客户端没有办法解决这个问题。这是我在响应中得到的错误：

Failed to load https://github.com/users/lukeschlangen/contributions: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.

如果可能的话，我更愿意在没有服务器的情况下执行此操作，所以我想在认输之前先确认一下。

Answer 1

您将无法在前端解决此问题，因为它需要 Github 进行服务器端更改。

但是，您可以让前端 ping 后端，然后后端会命中 URL 并转发信息，或者使用 cors-anywhere 之类的服务来解决这个问题。

GitHub 响应的 React Axios Cheerio 解析

React Axios Cheerio parsing of GitHub response

github

cors

cheerio

reactjs

axios