Attach cookies to src request?

[mmersiades]

I use CloudFront signed cookies to access video and image files in an S3 Bucket.

When I request an image via <img /> or even next-image (with optimisation turned off), the cookies (which are already set in the browser) are attached to the request and the images are fetched without a problem.

When I request a video via next-video, the browser does not attach the cookies to the request and I get a 403 response from the S3 bucket.

I experimented with a plain <video /> tag, and I can see browser has attached the cookies to the request made by the <video/> tag, which successfully returns the video (as a series of 206 Partial Content responses)

Also, cookies are attached when I use react-player.

Why aren't the cookies being attached when I use next-video? Is there a way to make this work with next-video?

[luwes]

Thanks for bringing this up.

Have you tried setting the crossOrigin property?
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin#use-credentials

[mersiades]

Thanks for your suggestion, @luwes .

Without crossOrigin={'use-credentials'}, I get a 403 response from the S3 bucket because the cookies are not attached.

With crossOrigin={'use-credentials'}, I get a 206 response because the cookies are attached. Looks like problem solved!