Entrar Ainda não tem acesso?
1
resposta

Erro ao buscar API Externa: Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto

por Josué Rechembak Da Silva
| 61.6k xp | 1 posts

Estou "tentando" fazer uns testes com a API do Bling (ERP), realizando um GET, me baseando nas explicações do tutor, e intenção é puramente didática, com finalidade de aprender e aperfeiçoar o retorno em um painel, uma página mais elaborada, enfim.

Porem tem esse retorno ao testar o GET: "Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto"

Segue código:

var buscar = document.querySelector("#buscar");

buscar.addEventListener("click", function(){
    console.log("Buscando");
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://bling.com.br/Api/v2/produtos/json/&apikey=(removi a api key para colocar o código aqui)")

    xhr.addEventListener("load", function(){
        console.log(xhr.responseText);
    });
    xhr.send();
});

No HTML apenas coloquei um botão, para ser ouvido ao ser clicado.

Talvez o meu código não vá funcionar, ou precise de alguma modificação para funcionar, li a respeito do "CORS", mas não entendi como faria.

Alguém consegue me dar um norte?

1 resposta
por Lorena Garcia
| 9787k xp | 14686 posts
Alura Scuba Team Suporte Educacional

Olá Josué, tudo bem?

O erro que você está recebendo é devido à política de segurança do navegador que impede que uma página da web acesse recursos de outro domínio. Isso é conhecido como política Same Origin (mesma origem).

Para resolver esse problema, você pode utilizar o CORS (Cross-Origin Resource Sharing), que é uma especificação que permite que um servidor especifique quem pode acessar seus recursos. Para habilitar o CORS no seu servidor, você precisa adicionar um cabeçalho "Access-Control-Allow-Origin" à resposta HTTP do servidor.

No seu caso, como você não tem acesso ao servidor do Bling, uma solução seria utilizar um servidor intermediário para fazer a requisição à API do Bling e retornar os dados para o seu cliente. Dessa forma, você pode contornar a política Same Origin.

Existem diversas opções de servidores intermediários que você pode utilizar, como o Node.js, PHP, Python, entre outros. Você pode escolher a linguagem que mais se adequa às suas necessidades e implementar um servidor simples que faça a requisição à API do Bling e retorne os dados para o seu cliente.

Espero ter ajudado.

Um abraço e bons estudos.