Question 184083 in Html Question posted in
Some basic documentation can be found here.

Html – React: CORS Error when fetching Youtube page

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:

Cross-Origin error

Front-end written on React, maybe this helps.

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    You can use separate server for this. For example Flask implementation:

    from flask import Flask, jsonify
from youtube_transcript_api import YouTubeTranscriptApi
from youtube_transcript_api.formatters import TextFormatter

app = Flask(__name__)

@app.route("/api/subtitles/<video_id>")
def get_subtitles(video_id: str):
    if type(video_id) != str:
        return jsonify({
            "status": "error",
            "reason": "Video ID is not a string value o_0"
        })
    
    try:
        transcription = YouTubeTranscriptApi.get_transcript(video_id, languages=("ru", "en"))
        transcription = TextFormatter().format_transcript(transcription)
    
    except Exception as e:
        print(e)
        return jsonify({
            "status": "error",
            "reason": str(e)
        })
    
    return jsonify({
        "status": "success",
        "data": transcription
    })

  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search