(in Video.js) how to set custom request headers?
Question
After running into this problem, I worked up a minimal example based on this documentation :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<!-- ^^ video.js stylesheet ^^ -->
<title>Video.JS test</title>
</head>
<body>
<video autoplay controls id="player"
poster="http://localhost:21212/img/tzGk0I0eb-4"
class="video-js">
<source src="http://localhost:21212/vid/tzGk0I0eb-4">
</video>
<script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
<!-- ^^ video.js script ^^ -->
<script type="text/javascript">
var headers = videojs.Hls.xhr.headers || {}
headers['X-Arbitrary'] = 'some-arbitrary-header-text'
videojs.Hls.xhr.headers = headers
var player = videojs('player')
</script>
</body>
</html>
I also tried it with this JS (I forget where I saw this):
videojs.Hls.xhr.beforeRequest = options => {
console.log(options)
var headers = options.headers || {}
headers['X-Arbitrary'] = 'some-arbitrary-header-text'
options.headers = headers
return options
}
var player = videojs('player')
As well as this (documented here ):
videojs.xhr({
headers: {
'X-Arbitrary': 'some-arbitrary-text'
}
})
var player = videojs('player')
And this ( from here )
videojs.Hls.xhr.beforeSend = request => {
requst.setRequestHeader('X-Arbitrary', 'some-arbitrary-text')
}
var player = videojs('player')
I have a mock server which outputs the request information:
2019-01-03 17:11:56 -05:00 :: GET -> 200:: "/img/tzGk0I0eb-4"
Host:
- localhost:21212
User-Agent:
- Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept:
- */*
Accept-Language:
- en-US,en;q=0.5
Accept-Encoding:
- gzip, deflate
DNT:
- 1
Connection:
- keep-alive
Pragma:
- no-cache
Cache-Control:
- no-cache
2019-01-03 17:11:56 -05:00 :: GET -> 200:: "/vid/tzGk0I0eb-4"
Host:
- localhost:21212
User-Agent:
- Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept:
- video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language:
- en-US,en;q=0.5
Range:
- bytes=0-
DNT:
- 1
Connection:
- keep-alive
Pragma:
- no-cache
Cache-Control:
- no-cache
2019-01-03 17:11:56 -05:00 :: GET -> 200:: "/img/tzGk0I0eb-4"
Host:
- localhost:21212
User-Agent:
- Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept:
- */*
Accept-Language:
- en-US,en;q=0.5
Accept-Encoding:
- gzip, deflate
DNT:
- 1
Connection:
- keep-alive
Pragma:
- no-cache
Cache-Control:
- no-cache
2019-01-03 17:11:56 -05:00 :: GET -> 200:: "/img/tzGk0I0eb-4"
Host:
- localhost:21212
User-Agent:
- Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept:
- */*
Accept-Language:
- en-US,en;q=0.5
Accept-Encoding:
- gzip, deflate
DNT:
- 1
Connection:
- keep-alive
Pragma:
- no-cache
Cache-Control:
- no-cache
All of the examples output similar log entries, without the requested header.
1 answers
solution1
0 2022-01-16 22:56:15
Pass them as query parameters. Apparently this solves the problem when other approaches fail and it is considered safe, like this discussion about passing JWTSs in query params.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.