Three.js+React动态创建VideoTexture遇Azure存储CORS跨域问题求助

我用Three.js和React开发全景漫游项目，视频存储在私有Azure存储中，通过生成SAS令牌访问。静态<video>标签能正常播放视频，但动态创建video元素并转为Three.js VideoTexture时出现跨域相关错误。

1. 静态Video标签（正常工作） #

静态写法可以正常加载Azure存储的视频：

<video id={uid} autoPlay controls controlsList="nodownload">
  <source style={{objectFit: "cover"}}
          src={videoPath}
          type="video/mp4"/>
</video>

注：videoPath指向Azure存储地址，非本站域名

2. 动态创建Video元素（出现错误） #

动态创建video并生成纹理的代码：

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)

3. 出现的错误信息 #

• 初始跨域错误：

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.

• 伴随的请求错误：

net::ERR_FAILED 206

• 设置video.crossOrigin = "anonymous"后新错误：

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/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)

4. 当前Azure存储CORS配置 #

解决步骤 #

1. 完善Azure存储CORS配置 #

从截图配置出发，补充以下关键项：

• Allowed Origins：明确添加http://localhost:3000（开发环境）和生产环境域名，测试阶段可临时用*（生产环境禁用）。
• Allowed Methods：必须包含GET和HEAD（视频播放依赖范围请求，HEAD用于获取文件元信息）。
• Allowed Headers：设置为*，或明确包含Origin, Range, Content-Type。
• Exposed Headers：添加Content-Range, Accept-Ranges，浏览器需要读取这些响应头处理分段视频请求。
• Max Age：设置为86400（24小时），减少预检请求次数。
  注：Azure CORS配置修改后可能需要几分钟生效

2. 修正动态Video创建逻辑 #

核心是确保跨域设置在资源加载前生效，且视频就绪后再生成纹理：

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"

// 直接给video设置src，替代动态创建source元素的方式
video.src = videoPath
video.type = "video/mp4"

videosRoot.appendChild(video)

// 等待视频加载就绪后再创建纹理
video.onloadeddata = () => {
  const videoTexture = new THREE.VideoTexture(video)
  // 后续纹理使用逻辑...
}

// 手动触发加载
video.load()

3. 检查SAS令牌权限 #

确保生成的SAS令牌包含读取权限（r），有效期覆盖访问时段，且未添加restrictToTenant=true这类限制跨域的参数。

4. 验证响应头 #

用浏览器开发者工具Network面板查看视频请求的响应头，确认Access-Control-Allow-Origin、Access-Control-Expose-Headers等字段是否正确返回，以此判断CORS配置是否生效。

内容的提问来源于stack exchange，提问作者Galaviel