Reacción Axios Cheerio análisis de la respuesta de GitHub

Estoy intentando hacer una request de Axios para recuperar datos de GitHub. Estoy recibiendo un error de falla que tiene sentido, y me pregunto si este es el comportamiento esperado y este tipo simplemente no es posible desde el lado del cliente, o si hay una manera de hacer esta request que simplemente estoy perdiendo:

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); } 

Creo que esto es algo que GitHub podría rechazar simplemente y que no hay forma de evitarlo desde el lado del cliente. Este es el error que recibo en respuesta:

Error al cargar https://github.com/users/lukeschlangen/contributions : La respuesta a la request de verificación previa no pasa la comprobación de control de acceso: No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. El origen ' http: // localhost: 3000 ' no está, por lo tanto, permitido. La respuesta tenía el código de estado HTTP 404.

Prefiero hacer esto sin un server si es posible, así que quiero asegurarme antes de tirar la toalla.

No podrá evitar esto en el front-end porque requiere cambios en el server por parte de Github.

Pero, podría hacer que su front-end haga ping en su back-end, que luego acceda a esa URL y transmita la información, o use un service para sortear esto como cors-anywhere .

Puede sortear la restricción de origen cruzado haciendo:

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

… es decir, prefija la URL de request con https://cors-anywhere.herokuapp.com (la URL de un proxy CORS público abierto). Y soltar headers: { 'Access-Control-Allow-Origin': '*'} porque el encabezado Access-Control-Allow-Origin es un encabezado de respuesta para que los serveres lo envíen; el único efecto que tendrá el agregarlo a una request es romper cosas.

Aquí hay un ejemplo simple usando la API de búsqueda.

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