CORS policy with m3u8 file

[HMT2002]

trafficstars

Be sure to search for your issue before opening a new one.

Current Behavior

I have 2 type of server, one is central for redirect, second is sub-server load balancing and one for serving files. It go like this client --> central --> sub-server. Both server already allow CORS. I tested and it working great with hls.js individually, I also tested the redirect url on hls.js test page https://hlsjs.video-dev.org/demo and it works fine. But it got CORS when use with react player, although it built with hls.js. I have my config like so:

    <ReactPlayer
      ref={videoReactPlayer}
      url="http://localhost:9000/redirect/hls/medium"
      width="60%"
      height="500px"
      autoPlay
      controls
      config={{
        forceHLS: true,
      }}
    />

I also use forceHLS too. Though it work if I use the direct url to the sub-server instead redirect from the central to the sub-server.

Expected Behavior

I want to play the m3u8 just like hls.js does. Hls.js have no problems with redirect requests.

Steps to Reproduce

• Start both of my server for redirecting and serving files.
• Use the API on central server for redirecting.

Environment

• URL attempting to play: It a localhost url, though. I've tested redirect url with many applications and it worked fine.
• Browser: Edge
• Operating system: Windows 10

Other Information

Nope.

[PieterjanDeClippel]

@HMT2002 Do you actually see the Access-Control-Allow-Origin header in the network tab on the requested m3u8 file?

[HMT2002]

@HMT2002 Do you actually see the Access-Control-Allow-Origin header in the network tab on the requested m3u8 file?

Yes, I don't know if you mean like this. The localhost:9100 is the sub-server btw

[yanghun0070]

me too

[HMT2002]

Sorry, I forgot this issue exist. It seems that ReactPlayer doesn't take the redirect url like hls,js, so I made a workaround, make a fetch function, fetch the sub-server url like "http://localhost:sub/path/to/file/video.m3u8" instead use a redirect url and it worked with in this way.

[birkankervan]

Sorry, I forgot this issue exist. It seems that ReactPlayer doesn't take the redirect url like hls,js, so I made a workaround, make a fetch function, fetch the sub-server url like "http://localhost:sub/path/to/file/video.m3u8" instead use a redirect url and it worked with in this way.

Can you explain more how you did it? I'm having the same problem and I haven't solved it yet, but seeing your message gave me hope :)

[HMT2002]

Sorry, I forgot this issue exist. It seems that ReactPlayer doesn't take the redirect url like hls,js, so I made a workaround, make a fetch function, fetch the sub-server url like "http://localhost:sub/path/to/file/video.m3u8" instead use a redirect url and it worked with in this way.

Can you explain more how you did it? I'm having the same problem and I haven't solved it yet, but seeing your message gave me hope :)

Oke, it simple. In my case as above, I use the localhost:9000 as the central load-balancing server, redirect all the access to the serving servers after make some processing, like localhost:9100, 9200,... . Instead of doing some redirection, I make the central server to return a json object, or something else as you want, a url to the serving server like "localhost:9100/film/name.m3u8", and then, well, just set and use that url. <ReactPlayer url='http://localhost:9100/film/name.m3u8'/> Noted that the url of the serving servers also CAN BE accessed directly from the clients, just like the central.