Why am I getting a CORS error when making a fetch request to an external API in JavaScript? [duplicate]

Access to fetch at ‘https://api.example.com/data’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

I’m not sure why this happens or how to fix it. I’ve read that it has something to do with CORS and server headers, but I’m new to this.

Could someone explain why this error occurs and how I can resolve it?
Is there anything I can do on the frontend, or does this have to be fixed on the server?

Thanks!