Check if Youtube thumbnail exists using JavaScript fetch

I know questions like that have been asked tons of times already but I still was not able to find a solution or even an explanation for that manner.

I work on a project that needs the best possible resolution on YouTube thumbnails. I used the following url https://i.ytimg.com/vi/VIDEOID/maxresdefault.jpg however I found out that on rare occasions this does not work and I get a placeholder image, and a status of 404, back. In that case I would like to use https://i.ytimg.com/vi/VIDEOID/hqdefault.jpg.

To check if an image exists I tried to make a fetch-request using JavaScript:

const url = "https://i.ytimg.com/vi/VIDEOID/hqdefault.jpg"
fetch(url).then(res => console.log(res.status))

But I get an error stating that the CORS-Header 'Access-Control-Allow-Origin' is missing. I tried setting it and several other headers I found but to no avail. It only works if I send the request in no-cors mode, but then the status is always 0 and all the other data seems to be missing aswell.

I also tested the request in Postman where it worked and even copied the JavaScript-Fetch-Snipped that Postman gave me:

var requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch("https://i.ytimg.com/vi/VIDEOID/maxresdefault.jpg", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

I read that this is a problem from the Server and Youtube is restricting this, but why does it work in Postman and why does it work when using <cfhttp> in ColdFusion? Also the status-code even shows up in the console within the CORS-Error message...

from Check if Youtube thumbnail exists using JavaScript fetch