Getting "blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." error

const astrosUrl = 'http://api.open-notify.org/astros.json';
const wikiUrl = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
const peopleList = document.getElementById('people');
const btn = document.querySelector('button');

async function getAstros() {
  const response = await fetch(astrosUrl);
  const astros = await response.json();
  return astros;
}

async function getProfile(astro) {
  const response = await fetch(astrosUrl + astro.name);
  const profile = await response.json();
  return profile;
}

function getAllProfiles(astros) {
  const profiles = astros.people.forEach(astro => getProfile(astro.name));
  return Promise.all(profiles);
}


// Generate the markup for each profile
function generateHTML(data) {
  data.map( person => {
    const section = document.createElement('section');
    peopleList.appendChild(section);
    section.innerHTML = `
      <img src=${person.thumbnail.source}>
      <span>${person.craft}</span>
      <h2>${person.title}</h2>
      <p>${person.description}</p>
      <p>${person.extract}</p>
    `;
  });
}

btn.addEventListener('click', (event) => {
  event.target.textContent = "Loading...";
  getAstros(astrosUrl)
    .then(getAllProfiles)
    .catch(err => console.log(err))
    .finally(() => event.target.remove());
});