javascript - 在 Cors 中发送原始 cookie 不适用于 VideoJS

Question

我有以下子域:

stream.example.com

sub.example.com

两个域都有 SSL 证书并且是有效的。
我正在使用 videoJS 7.6.6其中有 http_streaming图书馆。

在 sub.example.com ，有一个视频标签将破折号 list 设置为包含指向 stream.example.com 的链接的源。 .VideoJS 需要包含来自 sub.example.com 的 laravel cookie当向 stream.example.com 提出请求时链接，但这没有发生，当我下载 HAR result在开发人员控制台中，我在请求中看到了空 cookie。

我的 VideoJS HTML

<video-js id="player" class="video-js vjs-big-play-centered">
            <source src="data:application/dash+xml;charset=utf-8;base64,......." type="application/dash+xml" crossorigin="use-credentials">
        </video-js>

mainifest 是有效的，它包含 stream.example.com网址

视频JS

player = window.player = videojs('player', {
            html5: {
                hls: {
                    withCredentials: true
                }
            },
            controls : true,
            fluid: true,
            controlBar: {
                children: ['playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'settingMenuButton', 'qualitySelector','fullscreenToggle']
            },
            preload : 'auto',
            poster : '',
        });
        player.hotkeys({
            volumeStep: 0.1,
            seekStep: 5,
            alwaysCaptureHotkeys: true
        });

        var myplugin = window.myplugin = player.myplugin();
    }(window, window.videojs));

stream.example.com当我在浏览器选项卡中查看视频链接时，具有以下标题。

accept-ranges: bytes
access-control-allow-credentials: 1
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Content-Length, Authorization,Range
access-control-allow-methods: GET, PUT, POST, DELETE, OPTIONS
access-control-allow-origin: https://sub.example.com
access-control-max-age: 86400
cache-control: private, max-age=18350
content-length: 69688791
content-range: bytes 0-69688790/69688791
content-type: video/mp4

我下载了 HAR 请求以查看 videoJS 是如何发出请求的

  {
    "startedDateTime": "2020-03-15T07:53:57.647Z",
    "time": 1.1023430000004737,
    "request": {
      "method": "GET",
      "url": "https://stream.example.com/s/......",
      "httpVersion": "",
      "headers": [
        {
          "name": "Referer",
          "value": "https://sub.example.com/"
        },
        {
          "name": "Sec-Fetch-Dest",
          "value": "empty"
        },
        {
          "name": "User-Agent",
          "value": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36"
        },
        {
          "name": "DNT",
          "value": "1"
        },
        {
          "name": "Range",
          "value": "bytes=741-2044"
        }
      ],
      "queryString": [
        {
          "name": "u",
          "value": "....."
        }
      ],
      "cookies": [], // <-- The cookies are EMPTY
      "headersSize": -1,
      "bodySize": 0
    },

编辑 1

我已经通过在 .env 中添加以下内容在 laravel 中共享 cookie
SESSION_DOMAIN = .example.com sub.example.com 的 cookie 域显示 .example.com但是 stream.example.com 没有 cookie

编辑 2

对 stream.example.com 的 videojs 选项请求的响应如下所示

HTTP/2 204 No Content
server: nginx
cache-control: no-cache, private
date: Sat, 21 Mar 2020 06:19:26 GMT
access-control-allow-origin: https://sub.example.com
access-control-allow-methods: GET, POST, HEAD, OPTIONS
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Content-Length, Authorization,Range
access-control-allow-credentials: 1
access-control-max-age: 86400
set-cookie: XSRF-TOKEN=eyJpdiI6ImM4czZNVFRRbWF1emFONXlVMjBGWkE9PSIsInZhbHVlIjoiazVDMUNIR2NqXC9QVUpJdjA3S2lHQ2pKdkJFeHpZdGVodHQ5XC9nZ3JHYVQyUk50V2cxdkQrZ1wvV3ZsOEpDVUhBSiIsIm1hYyI6IjUwYjk4ZjYyZDJmNjg1ZjU4YTg2MDE5ZGNkYmZlOTk5NWVmNTE5ZTRjY2Q1YzQ0ZDI3MzEyNWQ0YmExMzVjZGIifQ%3D%3D; expires=Sat, 21-Mar-2020 10:19:26 GMT; Max-Age=14400; path=/; domain=.example.com
set-cookie: laravel_session=eyJpdiI6IkZvZk9vK2J3YVVhQ2Q4VXpTZjZXN3c9PSIsInZhbHVlIjoiNHZId3orR3dQRDRiOXVFVitKR21NU21DbnVFXC9IcFMxaDFsUXRRUG9VQkFHZnNSdVpRSFBaaHJ5cXdGZDJObUgiLCJtYWMiOiI5ZjllY2IwZjFiNzkxYWMxNTI2ZTFiZWU5OTA4YjNjNzIxZWNkMTBiZjY0ZWQzNDBkMzg5MTEzYjM2MjQ4ODk1In0%3D; path=/; domain=.example.com
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-content-type-options: nosniff
X-Firefox-Spdy: h2

Answer 1

我假设您需要制作 cookie 适用于所有子域 , 《分享》他们，如所述how to share cookie between subdomain and domain :

if you use the following, it will be usable on both domains:

Set-Cookie: name=value; domain=example.com

试试 选项请求 到 "url": "stream.example.com/s......"看看你是否得到了正确的响应 cors 标题？您可以通过 Firefox 开发者工具编辑和重新发送请求。

其他看起来都不错。

Set cookies for cross origin requests