HLS Stream - 403 Access Denied when accessing the Playlist file

[suriyakrish]

Current Behavior

Getting 403 Access denied issue when accessing the playlist file(index.m3u8) for HLS stream. We have HLS stream playlist and segments stored in the AWS Mediastore Service. And these files are served securely via Cloudfront service by using Signed URL. Backend API is triggered to get Signed URL for the playlist file from react based front end and we used react-player component to play HLS stream.

But the request for the signed URL is responding successfully when we tried CURL or when we hit the same signed url in the separate browser tab. In the response, we can see the playlist content(index.m3u8).

Only this Access denied issue occurs when it requested through react-player component.

But sometimes when we refresh the url(from browser) multiple times, react-player able to retrieve the playlist file and plays the stream.

Expected Behavior

Expecting the react-player able to retrieve the playlist file and plays the stream.

Environment

• URL attempting to play: https://dssssfffgg3b.cloudfront.net/live/test/index.m3u8?Policy=<Policy>&Signature=<Signature>&Key-Pair-Id=<Key-Pair-Id>
• Browser: Chrome
• Operating system: MAC

Steps to Reproduce

Following is the code we used to play HLS stream. Are we missing anything?

              <ReactPlayer
                  controls={true}
                  className="react-player"
                  width="100%"
                  height="auto"
                  url={getUrlPath(mediaStreamUrl)}
                  config={{
                      file: {
                          hlsOptions: {
                              xhrSetup: function xhrSetup(xhr, url) {
                                  xhr.setRequestHeader(
                                      "Access-Control-Allow-Headers",
                                      "Content-Type, Accept, X-Requested-With"
                                  );
                                  xhr.setRequestHeader(
                                      "Access-Control-Allow-Origin",
                                      "http://localhost:9999"
                                  );
                                  xhr.setRequestHeader(
                                      "Access-Control-Allow-Credentials",
                                      "true"
                                  );
                                  xhr.open('GET', url + getQueryParams(mediaStreamUrl));
                              }
                          }
                      }
                  }}
                  playing={true}
                  playbackRate={1.0}
                  onError={e => console.log("onError", e)}
              />}

[Yasamato]

The HTTP header 403 Access denied means you as a user are not authorized to access the requested resource. This could be due to a missing token, not being logged in or the provider denying you via e.g. CORS.

Setting the header Access-Control-Allow-Origin on the client-side is of no use, as the client doesn't serve any content to other clients... you have to set that header on the server side.

[taj567]

Is It Working @suriyakrish .

Am not able to play with m3u8 video file

[omeraslam-citrusbits]

@suriyakrish Are you able to fix this issue? I am also facing the same issue. Can you please help me

[yanghun0070]

me too