ThreeJS 视频纹理需要 CORS 标头，即使 <video> 标签不需要它答案

【问题标题】：ThreeJS video texture demands CORS headers even when the <video> tag doesn't require itThreeJS 视频纹理需要 CORS 标头，即使 <video> 标签不需要它
【发布时间】：2019-01-03 16:17:09
【问题描述】：

我有一个 localhost Web 服务器运行一个页面，该页面在 <video> 标记中播放远程视频（来自 Firestore 存储）。视频播放正确。好，很好。现在我想将该视频用作 ThreeJS 画布中的纹理（使用 THREE.VideoTexture）。但不是显示视频，ThreeJS 开始重复打印

THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.

无限循环。

我的视频真的需要只在 ThreeJS 画布内设置 CORS 标头吗？如果是这样，为什么？我该如何解决这个问题？

【问题讨论】：

标签： html video three.js cors firebase-storage

【解决方案1】：

我的视频真的需要只在 ThreeJS 画布内设置 CORS 标头吗？

是的。

如果是这样，为什么？

当您希望 JavaScript 从另一个来源读取数据时，需要使用 CORS（而不是简单地让浏览器呈现数据而您的 JavaScript 不接触它）。

当你把它用作纹理时，你需要读取视频数据并用 JavaScript 处理它。

我该如何解决这个问题？

配置您从中提取视频的服务器以授予您使用 CORS 的权限，或移动数据以使其位于同一来源。

【讨论】：

【解决方案2】：

我遇到了同样的问题，因为视频托管在具有不同域的服务器上。该服务器提供了 CORS，但另外我应该在我的视频中添加一个 crossorigin="anonymous"，就像这样

<video src="URL" crossorigin="anonymous"/>

最初添加它很重要。当我尝试动态添加它时，在video标签已经存在之后，它就不起作用了。

【讨论】：