React Axios GitHub 응답 Cheerio 구문 분석

Question

GitHub에서 데이터를 검색하기 위해 Axios에서 요청을 시도하고 있습니다. 나는 의미가 오류 오류가 나타납니다 그리고 이것이 예상되는 동작이 유형이 단순히 클라이언트 쪽에서 가능하지 않은 경우 또는 내가 단순히 누락되었습니다이 요청을 만드는 방법이 있는지 궁금하네요 :

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이 단순히 완전히 거부 할 수도 있고 클라이언트 측에서이 문제를 해결할 방법이 없다고 생각됩니다. 액세스 제어 검사를 통과하지 않는 프리 플라이트 요청에 응답 :

는 https://github.com/users/lukeschlangen/contributions를로드 할 수 없습니다 : 없음 '액세스 제어 - 허용 - 원산지'헤더는 요청에 존재 이것이 내가 응답 얻을 오류입니다 리소스. 따라서 'http://localhost:3000'은 액세스가 허용되지 않습니다. 응답의 HTTP 상태 코드는 404입니다.

가능한 경우 서버없이이 작업을 수행하고 싶습니다. 따라서 수건을 던지기 전에 확인하고 싶습니다.

Answer 1

Github에서 서버 쪽을 변경해야하므로 프런트 엔드에서이 문제를 해결할 수 없습니다.

그러나 프런트 엔드 핑에 백엔드를 연결 한 다음 해당 URL을 조회하여 정보를 전달하거나 서비스를 사용하여 cors-anywhere처럼 사용할 수 있습니다.

Answer 2

당신은 수행하여 출처 간 제한을 해결 얻을 수 있습니다 :

.get('https://cors-anywhere.herokuapp.com/' + 
    'https://github.com/users/lukeschlangen/contributions') 

... 즉, https://cors-anywhere.herokuapp.com과 요청 URL (열린 공공 CORS 프록시의 URL을) 앞에있다. 그리고 headers: { 'Access-Control-Allow-Origin': '*'}을 놓으십시오 - 왜냐하면 Access-Control-Allow-Origin 우두머리가 응답 우송 서버이기 때문에 돌려 보내십시오; 요청에 추가하는 유일한 효과는 중단하는 것입니다.

다음은 가져 오기 API를 사용하는 간단한 예입니다. 프록시가 작동하는 방법에 대한 설명은

fetch("https://cors-anywhere.herokuapp.com/" + 
 
    "https://github.com/users/lukeschlangen/contributions") 
 
    .then(response => response.text()) 
 
    .then(svg => { 
 
    document.body.innerHTML = svg; 
 
    })

을 참조 "권한 없음 - 제어 - 허용 - 원산지 헤더를"문제의 부분을 주위에 얻을 수있는 CORS 프록시를 사용하는 방법 No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API에 대한 답변

더 나은 점은 타사 프록시를 사용하는 대신 단지 5 개의 명령으로 2-3 분만에 Heroku에서 자신을 배포 할 수 있습니다. CORS 프록시를 사용하여 "No Access-Control-Allow-Origin 헤더"문제를 해결하는 방법 No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API의 섹션에도 자세한 내용이 있습니다.