0

Bom, eu e meu grupo de TCC estamos fazendo um site, onde a função dele é buscar os produtos em vários sites especializados em Hardwares e mostrar qual site possui o menor preço. Estamos fazendo o site com HTML, PHP, JavaScript e Node.JS (que possui os módulos request e cheerio para fazer o crawler, e Browserify para rodar os módulos no navegador), rodando apenas no USBWebserver. Pode parecer estranho, mas funciona.

Esse é o código "raiz" sem mostrar no HTML, que mostra com sucesso os resultados de todos os sites (coloquei pra mostrar no console apenas a quantidade das informações de cada site):


var request = require('request');
var cheerio = require('cheerio');

busca = "processador";

urlKabum = "https://www.kabum.com.br/cgi-local/site/listagem/listagem.cgi?string=" + busca;
urlTera = "https://www.terabyteshop.com.br/busca?str=" + busca;
urlChip = "https://www.chipart.com.br/produtos/" + busca;
urlPichau = "https://www.pichau.com.br/catalogsearch/result/?q=" + busca;
urlSubmarino = "https://www.submarino.com.br/busca/" + busca;

console.log(urlTera + '\n' + urlKabum + '\n' + urlChip + '\n' + urlPichau + '\n' + urlSubmarino);

function Kabum() {
    request(urlKabum, function (err, res, html) {
        if (err) console.log('Erro:' + err);

        var $ = cheerio.load(html);

        let produtoKabum = [];
        let titulo = [];
        let preco = [];
        let imagem = [];

        $(' .listagem-box').each(function (i, elem) {
            $(' .H-titulo a').each(function (i, elem) {
                titulo[i] = $(this).text();
            });

            $(' .listagem-preco').each(function (i, elem) {
                preco[i] = $(this).text();
            });

            $(' .listagem-img img').each(function (i, elem) {
                imagem[i] = $(this).attr('src');
            });

            titulo.join(', ');
            preco.join(', ');
            imagem.join(', ');
            produtoKabum.join(', ');

            produtoKabum[i] = [titulo[i], preco[i], imagem[i]];
        });
        console.log(produtoKabum.length);
    });
}

function Tera() {
    request(urlTera, function (err, res, html) {
        if (err) console.log('Erro:' + err);

        var $ = cheerio.load(html);

        let produtoTera = [];
        let titulo = [];
        let preco = [];
        let imagem = [];

        $(' .pbox.col-xs-12.col-sm-6.col-md-3').each(function (i, elem) {
            $(' .prod-name strong').each(function (i, elem) {
                titulo[i] = $(this).text();
            });

            $(' .prod-new-price span').each(function (i, elem) {
                preco[i] = $(this).text();
            });

            $(' .commerce_columns_item_image img').each(function (i, elem) {
                imagem[i] = $(this).attr('src');
            });

            titulo.join(', ');
            preco.join(', ');
            imagem.join(', ');
            produtoTera.join(', ');

            if (preco[i] == undefined) {
                preco[i] = 'INDISPONÍVEL';
            }

            produtoTera[i] = [titulo[i], preco[i], imagem[i]];
        });
        console.log(produtoTera.length);
    });
}

function ChipArt() {
    request(urlChip, function (err, res, html) {
        if (err) console.log('Erro:' + err);

        var $ = cheerio.load(html);

        let produtoChip = [];
        let titulo = [];
        let preco = [];
        let imagem = [];

        $(' .products__list__item').each(function (i, elem) {
            $(' .product-card__title').each(function (i, elem) {
                titulo[i] = $(this).text();
            });

            $(' .price').each(function (i, elem) {
                preco[i] = $(this).text();
            });

            $(' .product-card__figure img').each(function (i, elem) {
                imagem[i] = $(this).attr('src');
            });

            titulo.join(', ');
            preco.join(', ');
            imagem.join(', ');
            produtoChip.join(', ');

            produtoChip[i] = [titulo[i], preco[i], imagem[i]];
        });
        console.log(produtoChip.length);
    });
}

function Pichau() {
    request(urlPichau, function (err, res, html) {
        if (err) console.log('Erro:' + err);

        var $ = cheerio.load(html);

        let produtoPichau = [];
        let titulo = [];
        let preco = [];
        let imagem = [];

        $(' .item.product.product-item').each(function (i, elem) {
            $(' .product-item-link').each(function (i, elem) {
                titulo[i] = $(this).text();
            });

            $(' .price-boleto span').each(function (i, elem) {
                preco[i] = $(this).text();
            });

            $(' .product-image-photo').each(function (i, elem) {
                imagem[i] = $(this).attr('src');
            });

            titulo.join(', ');
            preco.join(', ');
            imagem.join(', ');
            produtoPichau.join(', ');

            produtoPichau[i] = [titulo[i], preco[i], imagem[i]];
        });
        console.log(produtoPichau.length);
    });
}

function Submarino() {
    request(urlSubmarino, function (err, res, html) {
        if (err) console.log('Erro:' + err);

        var $ = cheerio.load(html);

        let produtoSubmarino = [];
        let titulo = [];
        let preco = [];
        let imagem = [];

        $(' .product-grid-item.ColUI-sc-1ey7nd2-0.fUgyk.ViewUI-oocyw8-6.kvewNe').each(function (i, elem) {
            $(' .TitleWrapper-c6mv26-7.cXTBDO.ViewUI-oocyw8-6.kvewNe h1').each(function (i, elem) {
                titulo[i] = $(this).text();
            });

            $(' .PriceUI-sc-1m3ayw0-10.pYYOk.PriceUI-pftkg3-0.hDaJyt.TextUI-sc-1hrwx40-0.hbVZKK').each(function (i, elem) {
                preco[i] = $(this).text();
            });

            $(' .ImageUI-sc-1m3ayw0-13.bqjwSN.PictureUI-alry8x-1.fyrQZb img').each(function (i, elem) {
                imagem[i] = $(this).attr('src');
            });

            titulo.join(', ');
            preco.join(', ');
            imagem.join(', ');
            produtoSubmarino.join(', ');

            produtoSubmarino[i] = [titulo[i], preco[i], imagem[i]];
        });
        console.log(produtoSubmarino.length);
    });
}

Tera();
Kabum();
ChipArt();
Pichau();
Submarino();

Porém, quando passo o código para o HTML, apenas os sites KaBuM! e TeraByte poderam ser extraídos e mostrados no nosso site, e o restante, ocasionando o seguinte erro:

Access to fetch at 'https://www.chipart.com.br/produtos/processador' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

O código a seguir é um JavaScript para mostrar no site (campos como htmlTera e outros similares têm campos vazios, que na verdade são apenas divs, classes, imagens etc):


var unique = require('uniq');
var request = require('request');
var cheerio = require('cheerio');

function limpar() {
    document.getElementById("result").innerHTML = "";
    console.clear();
}

//Tratamento das informações:
function myTrim(trim) {
    return trim.replace(/^\s+|\s+$/gm, '');
}

function TrimAcent(trim) {
    return trim.replace(/�/g, 'í');
}

//URLs dos sites a serem requisitados:
function urls() {
    var busca = document.getElementById("inputProduto").value;

    resultSub = busca.replace(/ /g, "-");
    busca = busca.replace(/ /g, "+");

    urlChip = "https://www.chipart.com.br/produtos/" + busca;

    urlTera = "https://www.terabyteshop.com.br/busca?str=" + busca;
    console.log(urlTera);

    if ((busca == "processador") || (busca == "placa+de+video")) {
        urlKabum = "https://www.kabum.com.br/cgi-local/site/listagem/listagem.cgi?string=" + busca;
    }

    if (busca == "ssd") {
        urlKabum = "https://www.kabum.com.br/hardware/ssd-2-5/" + busca;
    }

    if (busca == "hd") {
        urlKabum = "https://www.kabum.com.br/hardware/disco-rigido-hd/" + busca;
    }

    if (busca == "cooler") {
        urlKabum = "https://www.kabum.com.br/hardware/coolers/" + busca;
    }

    console.log(urlKabum);
}

let main = function () {
    urls();
    limpar();
    Kabum();
    Tera();
    ChipArt();
}

function Kabum() {
    request(urlKabum, function (err, res, html) {
        if (err) console.log('Erro:' + err);

        var $ = cheerio.load(html);

        let produtoKabum = [];
        let titulo = [];
        let preco = [];
        let imagem = [];

        $(' .listagem-box').each(function (i, elem) {
            $(' .H-titulo a').each(function (i, elem) {
                titulo[i] = myTrim(TrimAcent($(this).text()));
            });

            $(' .listagem-preco').each(function (i, elem) {
                preco[i] = myTrim($(this).text());
            });

            $(' .listagem-img img').each(function (i, elem) {
                imagem[i] = myTrim($(this).attr('src'));
            });

            titulo.join(', ');
            preco.join(', ');
            imagem.join(', ');
            produtoKabum.join(', ');

            var htmlKabum = '' + titulo[i] + '' + preco[i] + '

Selecionar'; document.getElementById("result").innerHTML += htmlKabum; produtoKabum[i] = [titulo[i], preco[i], imagem[i]]; }); console.log(produtoKabum.length); }); } function Tera() { request(urlTera, function (err, res, html) { if (err) console.log('Erro:' + err); var $ = cheerio.load(html); let produtoTera = []; let titulo = []; let preco = []; let imagem = []; $(' .pbox.col-xs-12.col-sm-6.col-md-3').each(function (i, elem) { $(' .prod-name strong').each(function (i, elem) { titulo[i] = myTrim($(this).text()); }); $(' .prod-new-price span').each(function (i, elem) { preco[i] = myTrim($(this).text()); }); $(' .commerce_columns_item_image img').each(function (i, elem) { imagem[i] = myTrim($(this).attr('src')); }); titulo.join(', '); preco.join(', '); imagem.join(', '); produtoTera.join(', '); if (preco[i] == undefined) { preco[i] = 'INDISPONÍVEL'; } var htmlTera = '' + titulo[i] + '' + preco[i] + '

Selecionar'; document.getElementById("result").innerHTML += htmlTera; produtoTera[i] = [titulo[i], preco[i], imagem[i]]; }); console.log(produtoTera.length); }); } function ChipArt() { request(urlChip, function (err, res, html) { if (err) console.log('Erro:' + err); var $ = cheerio.load(html); let produtoChip = []; let titulo = []; let preco = []; let imagem = []; $(' .products__list__item').each(function (i, elem) { $(' .product-card__title').each(function (i, elem) { titulo[i] = $(this).text(); }); $(' .price').each(function (i, elem) { preco[i] = $(this).text(); }); $(' .product-card__figure img').each(function (i, elem) { imagem[i] = $(this).attr('src'); }); titulo.join(', '); preco.join(', '); imagem.join(', '); produtoChip.join(', '); var htmlChip = '' + titulo[i] + '' + preco[i] + '

Selecionar'; document.getElementById("result").innerHTML += htmlChip; produtoChip[i] = [titulo[i], preco[i], imagem[i]]; }); console.log(produtoChip.length); }); } let button = document.getElementById("search"); button.addEventListener("click", main, false);

O que poderia estar ocasionando esse erro?

inserir a descrição da imagem aqui

2 Respostas 2

1

O erro de CORS vai sempre ocorrer quando você fizer requisições de um domínio que é diferente do que está sendo requerido.

Esse problema se da pois o BACKEND dos sites que você está enviando requisição, não devolve nos cabeçalhos o "Access-Control-Allow-Origin": "*" por exemplo, que é para permitir requisições de qualquer origem.

Talvez se você estivesse fazendo a requisição de um domínio com SSL (https) você conseguiria fazer ou de um http mesmo mas de um domínio diferente do "localhost" já funcionaria.

Como você está usando o localhost, recomendo o seguinte:

O Heroku, esse cara "burla" o Cors e você consegue executar essas requisições do local.

Por exemplo, para sua requisição para a kabum a url ficaria assim:

https://cors-anywhere.herokuapp.com/https://www.kabum.com.br/cgi-local/site/listagem/listagem.cgi?string=

Importante

  • Não use o heroku na produção (caso você vá subir esse projeto), envie para o site os headers que ele precisa e cookies caso o site crie.

Outra alternativa que acho melhor, é usar a lib axios para fazer suas requisições, ao invés da request.

Eu particularmente acho mais fácil de achar respostas com ele e de implementar.

Acredito que seja isso cara, primeiramente eu tentaria usar o heroku, caso ele não resolva sua vida, você terá que mandar os headers e cookies que o site precisa, se ainda assim não funcionar, eu tentaria subir uma máquina na aws (free tier) t2.micro (é de graça) e faria o teste diretamente do ip dessa máquina para ver se consegue acessar o site (acredito que sim)

Mais uma alterativa para você é usar algum túnel para você fazer a conexão, já usei muito esse: https://ngrok.com/

Unico problema é que existe um limite de conexões por minuto na versão free dele, mas da pra você testar e ver se resolve.

Acredito que é isso, qualquer dúvida posta ai que tento ajudar.

-1

você pode fazer um npm install cors --save ai no seu arquivo main do node (index.js ou server.js geralmente) fazer const cors = require('cors'), e depois fazer um app.use(cors()), onde app seria instancia do seu servidor.

1
  • No projeto não criamos essa parte do app, apenas chamamos os módulos do request e cheerio, já tentamos colocar uns Headers no PHP, no .htaccess e nada... Commented 26/04/2019 às 17:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .