Невозможно воспроизвести файл HLS m3u8 с файлами cookie, подписанными AWS CloudFront
Я работаю над проектом, в котором мне нужно будет воспроизвести зашифрованный видеофайл HLS (.m3u8). Я использую CloudFront и подписанные файлы cookie для защиты контента. Я могу воспроизводить файл .m3u8 без подписанных файлов cookie, но когда я использую подписанные файлы 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 действительно ошеломляют, я отправил много вопросов по SO и проблемам на Github, но до сих пор не повезло. Надеюсь, здесь мне кто-нибудь поможет.
Вот скриншот поведения раздачи 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>
Вот политика CORS с поддержкой S3:
[
{
"AllowedHeaders": [
""
],
"AllowedMethods": [
"POST",
"GET",
"PUT",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
Заранее спасибо.
@DzungPV Да, у меня это работает
Ответы 1
Ответ содержится в сообщении об ошибке браузера: «Значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», когда режим учетных данных запроса «включить». Политика CORS вашей корзины S3 не может использовать подстановочный знак для значения AllowedOrigins.
Кроме того, ваше пустое значение AllowedHeaders может удалять значение Host из проверки запроса предварительной проверки, поэтому давайте установим для него подстановочный знак на всякий случай.
Если вы обновите политику CORS корзины S3 до этой, это должно решить проблему:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"POST",
"GET",
"PUT",
"HEAD"
],
"AllowedOrigins": [
"https://example.com",
"https://protected.example.com"
],
"ExposeHeaders": []
}
]
Привет Брайан. он работает в производстве. Но я не могу получить доступ с локального хоста. Я изменил свой компьютерный хост на dev.example.com, а мой производственный URL-адрес — example.com. в основном, всякий раз, когда я пытаюсь получить доступ к видео с dev.example.com (localhsot), он говорит, что «dev.example.com» заблокирован политикой CORS: нет заголовка «Access-Control-Allow-Origin». присутствует на запрошенном ресурсе. ```
Вам нужно добавить dev.example.com в свою политику CORS S3 в AllowedOrigins.
Вы заставляете это работать? Я пытаюсь в течение 3 дней без успеха.