cors-anywhere doesn't work with youtube m3u8 files

[eyalmazuz]

I'm trying to build a very simple video player that plays m3u8 files using vue and videoJS after encountering cors issues I found cors-anywhere. for some for the m3u8 files it works fine, but for youtube video I still get an error.

I use python's streamlink package to get the m3u8 files

steps to reproduce:

1. install streamlink with pip install streamlink
2. create new vue project
3. using yarn install cors-anywhere and videojs with the following command yarn add video.js videojs-contrib-hls videojs-vue
4. change the App.vue to

   
   <template>
   <div>
   <video-player />
   </div>
   </template>

5. create VideoPlayer.vue with the following content

6. replace hlsUrl with the output of ``streamlink "https://www.youtube.com/watch?v=jfKfPfyJRdk" best --stream-url``
7. run cors-anywhere proxy server with ``node node_modules/cors-anywhere/server.js``
8. run the vue server with ``yarn serve``
9. open http://localhost:8081 and open the developer tools 
10. try press play on the video player

and I get the following error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://rr1---sn-nhpax-ua8r.googlevideo.com/videoplayback/id/jfKfPfyJRdk.2/itag/96/source/yt_live_broadcast/expire/1683303366/ei/ZtdUZKbxCI2FWKuUm_gH/ip/46.121.21.17/requiressl/yes/ratebypass/yes/live/1/sgoap/gir%3Dyes%3Bitag%3D140/sgovp/gir%3Dyes%3Bitag%3D137/hls_chunk_host/rr1---sn-nhpax-ua8r.googlevideo.com/playlist_duration/30/manifest_duration/30/vprv/1/playlist_type/DVR/mh/rr/mm/44/mn/sn-nhpax-ua8r/ms/lva/mv/u/mvi/1/pl/26/keepalive/yes/fexp/24007246/mt/1683280474/sparams/expire,ei,ip,id,itag,source,requiressl,ratebypass,live,sgoap,sgovp,playlist_duration,manifest_duration,vprv,playlist_type/sig/AOq0QJ8wRQIhAMExAPFCPTFeiAC9v_DlJaUKHOlTDHUoejgjuM7Y6HdzAiB5UZKhs2MCCSNvIKfxHTF1d_T70ZieE9VJjGLUeysIig%3D%3D/lsparams/hls_chunk_host,mh,mm,mn,ms,mv,mvi,pl/lsig/AG3C_xAwRgIhALMROwaI_Due_oNvraLiV_Y-DeuViFoUqw-W7NXPpG47AiEAo2Uqd4NK3ZclcBQH4GVIgBtnGUF2OZneILsyz7_Esxk%3D/playlist/index.m3u8/sq/3896835/goap/clen%3D81911%3Blmt%3D1683219051513363/govp/clen%3D487542%3Blmt%3D1683219051513361/dur/5.000/file/seg.ts. (Reason: CORS request did not succeed). Status code: (null).

[Rob--W]

As the error suggests, you are actually trying to request the data directly without requesting the resource through CORS Anywhere.

Use the network tab of the browser's developer tools to figure out what is responsible for triggering the direct request, and prepend the CORS Anywhere URL to send a proxied request.