Question

我是Web开发的新手。我使用react JS编写了以下代码用于视频流。为了进行身份验证，我需要在请求服务器时设置setReqeustHeader。

constructor(props) {
  super(props);
  this.Click = this.Click.bind(this);
  this.onPlay = this.onPlay.bind(this);
}

Click(evt) {
  const path = "https://10.1.3.215:8443/files" +
  this.props.location.pathname.slice(6, 
  this.props.location.pathname.length) + "/" + this.props.selectedName

  const xhr = new XMLHttpRequest();
  xhr.open("GET", path, true);
  xhr.setRequestHeader('idtoken', this.props.user.idtoken);
  xhr.setRequestHeader('id', this.props.user.id);
  xhr.send({url:path});
}

onPlay(evt) {
  console.log("Hello, I'm streaming...")
}


<video
  ref={(video) => {this.video = video}}
  src={this.state.url} 
  width="1080"
  onClick={this.click}
  onPlay={this.onPlay}
  height="640" 
  controls
/>

标头已成功发送到服务器，并且客户端从服务器下载了视频。但是，它不能由html5视频播放。

如果我从服务器端删除了身份验证要求，则客户端端可以播放视频流。我无法同时实现身份验证和视频流。有谁知道如何解决这个问题？

如何在带有视频流的React js中设置请求标头？

0 个答案: