无法使用 AWS CloudFront 签名 Cookie 播放 HLS m3u8 文件
Fai*_*ikh 3 amazon-cloudfront video.js vivado-hls hls.js
我正在开发一个项目，需要播放 HLS 加密视频 (.m3u8) 文件。我正在使用 CloudFront 和签名 cookie 来保护内容。我可以在没有签名 cookie 的情况下播放 .m3u8 文件，但是当我使用签名 cookie 时，cookie 不会在请求中发送。
我正在使用 CloudFront 分发的备用域，并且我确认除了 .m3u8 文件之外，我还可以使用签名 cookie 访问所有其他文件。
经过研究，我发现如果我withCredentials像下面的代码一样设置为 true ，那么签名的 cookie 将在请求中发送：
player.ready(function() {
player.src({
src: 'https://protected.example.com/output-plain/art.m3u8',
type: 'application/x-mpegURL',
withCredentials: true
});
});
这段代码有效，签名的 cookie 正在请求中发送，但是我开始收到一个新错误：
Access to XMLHttpRequest at 'https://protected.example.com/output-plain/art.m3u8undefined' from origin 'https://example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
然后我发现我必须设置Access-Control-Allow-Credentials为true。但是，这对我不起作用。
我正在使用 video.js 库，我也尝试过 hls.js 并遇到相同的错误并卡在同一位置。
在过去的 7 天里，我一直被这个问题困扰，我认为 AWS 文档真的让人不知所措，我已经在 Github 上提到了很多关于 SO 的问题和问题，但仍然没有运气。希望有人能在这里帮助我。
以下是 CloudFront 分发行为的屏幕截图：
这是我的 php 和 js 代码；索引.php：
<?php
header("Access-Control-Allow-Origin: https://protected.example.com");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 1000");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");
?>
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>
<body>
<video
id="video_player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'
width=600 height=300>
</video>
<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>
<script>
var player = videojs('video_player')
player.responsive(true);
player.ready(function() {
player.src({
src: 'https://protected.example.com/output-plain/art.m3u8',
type: 'application/x-mpegURL',
withCredentials: true
});
});
</script>
</body>
</html>
这是 S3 反对 CORS 政策：
[
{
"AllowedHeaders": [
""
],
"AllowedMethods": [
"POST",
"GET",
"PUT",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
先感谢您。
答案就在浏览器的错误消息中：“当请求的凭据模式为‘include’时，响应中‘Access-Control-Allow-Origin’标头的值不能是通配符‘*’。” 您的 S3 存储桶的 CORS 策略不能对AllowedOrigins 值使用通配符。
另外，您的空AllowedHeaders值可能会从预检请求检查中删除Host值，因此为了安全起见，我们将其设置为通配符。
如果您将 S3 存储桶的 CORS 策略更新为此，应该可以解决该问题：
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"POST",
"GET",
"PUT",
"HEAD"
],
"AllowedOrigins": [
"https://example.com",
"https://protected.example.com"
],
"ExposeHeaders": []
}
]
| 归档时间： |
|
| 查看次数： |
4400 次 |
| 最近记录： |