Fetch returns empty response but Network tab shows data

Question

Using this simple snippet:

fetch("https://www.youtube.com/feeds/videos.xml?channel_id=UCAL3JXZSzSm8AlZyD3nQdBA", { mode: "no-cors" })
  .then(r => {
    console.debug(r);
    r.text().then(t => console.debug(t)).catch(console.error);
  })
  .catch(console.error);

I receive an empty response (null body, empty url, status of zero, ok is false), however when I go to the Network tab, I can see the data in the Response tab within it. I expect fetch response to give me the same.

What gives? I've tried adding credentials: "include" but it didn't make a difference and shouldn't, this resource should be accessible without it.

Answer 1

I will answerize because it helped me :)

the request goes through because it's the response headers that control CORS - so you have to get a response to know if CORS is enabled for the site.

You can see the response body in the console because there's no security issues with seeing the response body in the console, as you can just open the page anyway, right.

The fact that it's an RSS feed is irrelevant - youtube clearly don't want browsers that are viewing other sites to directly access their RSS resources. You need to "proxy" the request on your server