Article image
Karen Banci
Karen Banci09/06/2022 02:27
Compartilhe

JavaScript Assincrono

  • #JavaScript
  • #API Rest

Alguém teve esse problema ao resolver o desafio do JavaScript Assíncrono do Bootcamp Santander?

Access to fetch at 'https://thatcopy.pw/catapi/rest/' from origin 'http://127.0.0.1:5500' 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.

codigo ----------------

const BASE_URL = "https://thatcopy.pw/catapi/rest/";

const catBtn = document.getElementById("change-cat");

const catImg = document.getElementById("cat");

const getCats = async() => {

try {

const data = await fetch(BASE_URL);

// aqui estou pegando os dados do API e convertendo em JSON

const json = await data.json();

// aqui estou acessando a propriedade webpurl

return json.webpurl;

} catch (e) {

console.log(e.message);

}

}

const handleCats = async() => {

// aqui vai chamar a funcao acima para executar

catImg.src = await getCats();

}

catBtn.addEventListener("click", handleCats);

handleCats();

Compartilhe
Comentários (7)
Carlos Hayden
Carlos Hayden - 26/06/2022 12:44

Eu usei a solução do Alexandre Barros, o endereço que tá no video da Stephany não está mais funcionando.

Usei o Live Server e apontei o endereço do meu computador no celular da minha sobrinha pra ela ficar olhando as fotos dos Gatinhos, Ela adorou! :)

OBS: O computador e o celular precisam estar na mesma rede para funcionar.

AB

Alexandre Barros - 09/06/2022 05:11

Bom dia Karen, tudo bem? Eu passei pelo mesmo problema, altere o endereço para :

const BASE_URL = 'https://api.thecatapi.com/v1/images/search';

no try, altere para: return json[0].url;

veja se funciona

Karen Banci
Karen Banci - 09/06/2022 14:24

Obrigada pela resposta de vocês, eu fiz aqui e deu certo!!


VALEUUUU

Angelo Duarte
Angelo Duarte - 09/06/2022 08:16

Karen terminei o meu e deu o mesmo erro, eu creio que seja a pagina que não esteja mais disponivel, vou alterar o endereço assim como os amigos Claudio e Alexandre fizeram.

Ryan Brandão
Ryan Brandão - 09/06/2022 08:10

Bom dia Karen, esse erro é comum, ocorreu comigo, como podemos ver ali da Error de Cors Policy

image isso ocorre pq os novos navegadores não deixam fazer requisição em outras urls, por questão de segurança, existe um plugin que você pode baixar para desligar essa segurança, nome do plugin é

image

Claudio Roberto
Claudio Roberto - 09/06/2022 05:33

Bom dia Karen,

Tive o mesmo problema com este link,, porém utilizei este https://randomfox.ca/floof/ para acessar as imagens que neste caso são de lobos.


Meu código ficou conforme abaixo:



const BASE_URL = 'https://randomfox.ca/floof/';


const catBtn = document.getElementById('change-cat');


const getCats = async () => {

    try {

        const data = await fetch(BASE_URL);

        const json = await data.json();

        return json.image; //image foi retirado da url acima(BASE_URL) utilizada acima para buscar as imagens

    } catch (e) {

        console.log(e.message);

    }

};


const loadImg = async () => {

    const catImg = document.getElementById('cat');

    catImg.src = await getCats();

};


catBtn.addEventListener('click', loadImg);


loadImg();

Angelo Duarte
Angelo Duarte - 09/06/2022 04:19

Oi Irmã bom dia, eu to nessa parte do curso no momento assim que eu conseguir eu lhe passo onde ocorreu o erro