Sending origin cookies in Cors not working with VideoJS

问题

I have the following subdomains:

stream.example.com
sub.example.com

Both domains have SSL certificates and are valid. I am using videoJS 7.6.6 which has http_streaming library.

On sub.example.com , there is a video tag which sets a dash manifest as source containing links to stream.example.com.VideoJS needs to include laravel cookies from sub.example.com when making a request to stream.example.com links but this is not happening and when i download the HAR result from developer console i see empty cookies in the request.

My 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>

The mainifest is valid and it contains stream.example.com urls

VideoJS

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 has the following headers when i view a video link in a browser tab.

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

I downloaded the HAR request to see how videoJS is making the request

  {
    "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
    },

Edit 1

I am already sharing cookies in laravel by adding the following in .env

SESSION_DOMAIN = .example.com

The cookie domain for sub.example.com show .example.com but no cookie for stream.example.com

Edit 2

The response to videojs options request for stream.example.com are shown below

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

回答1:

I assume you need to make the cookies valid for all subdomains, "share" them, as described 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

Try an OPTIONS request to "url": "stream.example.com/s......" and see if you get the correct response cors headers as above? You can edit and resend the request through Firefox Developer tools.

All other look good.

Set cookies for cross origin requests

来源：https://stackoverflow.com/questions/60690849/sending-origin-cookies-in-cors-not-working-with-videojs

标签

javascript

laravel

cross-domain

video.js