Azure storage CORS settings for video element

I'm creating panorama tour with some additional content (videos,...) with three js and react.

My videos are stored on private azure storage, where I generate SAS token for certain video files.

When I try to play video from gui it works with CORS well :

        <video id={uid} autoPlay controls controlsList="nodownload">
            <source style=
                    src={videoPath}
                    type={"video/mp4"}/>
            </video> //this one is working

videoPath in this case is on www.mystorage.azurelink.net, not on my origin.

But when I create video element dynamically per view:

    const videosRoot = document.getElementById("videosroot")

    const video: HTMLVideoElement = document.createElement("video")
    video.id = `video-${this.uid}`
    video.crossOrigin = "anonymous"
    video.playsInline = true
    video.muted = true
    video.style.display = "none"

    const source = document.createElement("source")
    source.id = `video-source-${this.uid}`

    video.appendChild(source)

    videosRoot.appendChild(video)
....
    const videoTexture = new three.VideoTexture(videoElement)

I got an error:

Access to video at 'https://mystorage.blob.core.windows.net/MYCONTAINER/Videos/default.mp4?MYSASTOKEN' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and

net::ERR_FAILED 206

My storage CORS configuration:

What should I change in my application to make this working (video is obviously played because I get on play ended callback) ?

        video.crossOrigin = "anonymous"

I get error:

index.js:1 THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The video element contains cross-origin data, and may not be loaded.
    at Object.texImage2D (http://localhost:3000/static/js/vendors~main.chunk.js:339244:21)
    at uploadTexture (http://localhost:3000/static/js/vendors~main.chunk.js:340051:19)
    at WebGLTextures.setTexture2D (http://localhost:3000/static/js/vendors~main.chunk.js:339679:9)
    at SingleUniform.setValueT1 [as setValue] (http://localhost:3000/static/js/vendors~main.chunk.js:336186:12)
    at WebGLUniforms.upload (http://localhost:3000/static/js/vendors~main.chunk.js:336677:11)
    at setProgram (http://localhost:3000/static/js/vendors~main.chunk.js:343221:21)
    at WebGLRenderer.renderBufferDirect (http://localhost:3000/static/js/vendors~main.chunk.js:342547:21)
    at renderObject (http://localhost:3000/static/js/vendors~main.chunk.js:342939:13)
    at renderObjects (http://localhost:3000/static/js/vendors~main.chunk.js:342915:9)
    at renderScene (http://localhost:3000/static/js/vendors~main.chunk.js:342855:35)
    at WebGLRenderer.render (http://localhost:3000/static/js/vendors~main.chunk.js:342744:7)
    at World.draw (http://localhost:3000/static/js/main.chunk.js:4310:21)
    at World.step (http://localhost:3000/static/js/main.chunk.js:4318:14)
    at onAnimationFrame (http://localhost:3000/static/js/vendors~main.chunk.js:342661:35)
    at onAnimationFrame (http://localhost:3000/static/js/vendors~main.chunk.js:332519:5)

Via Active questions tagged javascript - Stack Overflow https://ift.tt/qfys7Th