Video.js возвращает политику ошибок CORS при получении контента Cloudfront ⇐ Javascript

[Anonymous]

Резюме
В настоящее время я пытаюсь создать веб-сайт, на котором будут отображаться частные видео в формате MPEG DASH с помощью Video.JS на основе привилегий пользователя. Я размещаю интерфейс с помощью NextJS (https://development.domain.com) и серверную часть с NestJS (https://api.development.domain.com). Я храню видео в частной корзине S3 и использую CloudFront для создания подписанных файлов cookie (если пользователь авторизован) и отображения контента.

Код: Выделить всё

Frontend address: https://development.domain.com
Backend address: https://api.development.domain.com
CDN (Cloudfront) address: https://cdn-development.domain.com

Проблема
Если я получу доступ к видео напрямую https://cdn-development.domain.com/private /intro.mpd, а файлы cookie: CloudFront-Key-Pair-Id, CloudFront-Policy, CloudFront-Signature правильно хранятся на странице браузера. Я могу нормально просматривать видео. Однако, если я попытаюсь воспроизвести это в своем видеоплеере в приложении NextJS, видео не воспроизводится и возвращается:
Значение «Access-Control-Allow-» Заголовок «Происхождение» в ответе не должен содержать подстановочный знак «*», если режим учетных данных запроса — «включить». Режим учетных данных запросов, инициированных XMLHttpRequest, контролируется атрибутом withCredentials.
Компонент Video.js

Код: Выделить всё

  playerRef.current = videojs(videoElement, {
responsive: true,
fluid: true,
aspectRatio: "16:9",
sources: [
{
src: videoSrc,
type: "application/dash+xml",
withCredentials: true,
},
],
});

Корзина S3 – политика CORS
[img]https:/ /i.sstatic.net/BOIJGRgz.png[/img]

Cloudfront




Подробнее здесь: https://stackoverflow.com/questions/793 ... nt-content