React: CORS Error when fetching Youtube page

Question

I need to get the HTML markup of a YouTube video page. Here is the code:

async function get_subtitles(video_id: string): Promise<string> {
    if (video_id.includes('https://') || video_id.includes('http://'))
    throw new EvalError("You provided an invalid video id. Make sure you are using the video id and NOT the url!")

    const WATCH_LINK: string = `https://www.youtube.com/watch?v=${video_id}`
    
    const ytRES = await fetch(WATCH_LINK);
    console.log(ytRES)
    const ytHTML = await ytRES.text();

    //extract_captions_json(ytHTML, video_id);
}

When I try to load page, I get this error:

Front-end written on React, maybe this helps.

tried use custom headers, axios and etc. Nothing works.

Answer 1

why do you get cors with react:
your react is most probably set for client side rendering (default for CRA).
in this case, your app's client is accessing your app through http://yourhome.com but is then asked to fetch data from https://youtube.com.
cors sees that both url ain't in no way related (no subdomain or such) and just blocks youtube requests.
what can you do to deal with it:

• set a proxy which will translate your youtube.com requests to yourhome/youtube.com
  • with a conf in your config.json in the project root, see related answear (can either proxy directly to youtube or a custom server (express server for example))
  • with a reverse proxy server
• server side rendering (probably, didn't test), with nextjs for exemple