（在 Video.js 中）如何设置自定义请求标头？答案

【问题标题】：(in Video.js) how to set custom request headers?（在 Video.js 中）如何设置自定义请求标头？
【发布时间】：2022-01-17 06:56:15
【问题描述】：

在遇到这个问题后，我根据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>

我也用这个 JS 试过了（我忘了我在哪里看到的）：

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')

还有这个（记录在here）：

videojs.xhr({
headers: {
'X-Arbitrary': 'some-arbitrary-text'
}
})
var player = videojs('player')

还有这个（来自here）

videojs.Hls.xhr.beforeSend = request => {
requst.setRequestHeader('X-Arbitrary', 'some-arbitrary-text')
}
var player = videojs('player')

我有一个输出请求信息的模拟服务器：

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

所有示例都输出类似的日志条目，但没有请求的标头。

【问题讨论】：

我从来没有找到解决方案或让它按预期工作。我的解决方法是将自定义标头值放在查询参数而不是标头中。

标签： javascript xmlhttprequest http-headers html5-video video.js

【解决方案1】：

将它们作为查询参数传递。显然，当其他方法失败并且被认为是安全的时，这可以解决问题，例如 this discussion 关于在查询参数中传递 JWTS。

【讨论】：