No 'Access-Control-Allow-Origin

Hello, I am getting an error as detailed lines below:

Access to fetch at 'https://dog.ceo/api/breeds/basenji/image/random' from origin 'http://port-80-7w64xv9xdd.treehouse-app.com' 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.

I couldn't solve this issue by myself :( Here is my code:

const select = document.getElementById('breeds'); const card = document.querySelector('.card'); const form = document.querySelector('form');

// ------------------------------------------ // FETCH FUNCTIONS // ------------------------------------------

//Vamos a simplificar el fetch request centralizandolo function fetchData(url){ return fetch(url) .then(res => res.json()); //parsing response to JSON }

//Con el siguiente fetch recogemos del link del API la raza convertida en formato JSON fetchData('https://dog.ceo/api/breeds/list') .then(data => generateOptions(data.message))

//Con el siguiente fetch recogemos del link del API la imagen convertida en formato JSON fetchData('https://dog.ceo/api/breeds/image/random') .then(data => generateImage(data.message))

// ------------------------------------------ // HELPER FUNCTIONS // ------------------------------------------

//La siguiente función permite introducir como html la raza obtenida del API y mostrarla como opciones function generateOptions(data){ const options = data.map(item => <option value='${item}'>${item}</option> ).join(''); //Esto permite eliminar el ", " que aparece en el html después del nombre de cada raza

//Ahora introducimos en el html del id breeds (constante select) select.innerHTML = options; }

//La siguiente función permite introducir como html la imagen obtenida del API function generateImage(data) { const html = <img src='${data}' alt> <p>Click to view images of ${select.value}s</p> ; card.innerHTML = html; }

function fetchBreedImage(){ const breed = select.value; const img = card.querySelector('img'); const p = card.querySelector('p');

//En vez de pasar solo la url como un string uso un template literal //por que quiero interpolar el valor (insertar) de la variable raza en el URL fetchData(https://dog.ceo/api/breeds/${breed}/image/random) .then(data => { img.src = data.message; img.alt = breed; p.textContent = Click to view more ${breed}s; }) } // ------------------------------------------ // EVENT LISTENERS // ------------------------------------------ select.addEventListener('change', fetchBreedImage); card.addEventListener('click', fetchBreedImage);

I am also getting the following errors:

app.js:11 GET https://dog.ceo/api/breeds/airedale/image/random 404

port-80-7w64xv9xdd.treehouse-app.com/:1 Uncaught (in promise) TypeError: Failed to fetch