Refused to set unsafe header "Referer"

I am working with a api to fetch anime video contents for react app.

and i also wanna use hls(the thing let's you play.m3u8 files in browser) + plyr(video plyr) the problem is that the server wants the Referer to be https://kwik.cx/ and then chrome is throwing the erro.

App.js

import './App.css';
import {Helmet} from "react-helmet";
function App() {
  return (
    <>    
    <div>
    <div class="container">
    <video preload="none" id="player" autoplay controls crossorigin></video>
  
  
  
   <Helmet>
  <script >
    {`
  var video = document.querySelector('#player');
  const player = new Plyr('video');
  const hls = new Hls({
    xhrSetup: xhr => {
      xhr.setRequestHeader('Referer', "https://kwik.cx/")
    }
  })
  hls.loadSource('https://na-051.files.nextcdn.org/hls/06/7b926b16e6aa31d7f7856bfae01dd151aaffec710bede2981633518d5f1fe809/owo.m3u8');
  hls.attachMedia(video);
  plyr.setup(video);
  window.player = player;
`}
  </script>
  </Helmet> 


 
</div>
    </div>
    </>

  );
}

export default App;

My index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Plyr </title>

  <link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
</head>

<body>

  

  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">

    

    
  </div>
  


  <script src="https://cdn.plyr.io/3.7.2/plyr.polyfilled.js"></script>
  <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
</body>

</html>

Thanks in advance

Refused to set unsafe header "Referer"

0 Answers