三个 JS 污染的画布和 CORS答案

【问题标题】：THREE JS tainted canvas and CORS三个 JS 污染的画布和 CORS
【发布时间】：2017-12-18 16:59:30
【问题描述】：

我正在尝试渲染具有从不同域获取的背景图像的 THREE.js 场景。

我收到了tainted canvas error，因为该图像未获得 CORS 批准，因此对画布的操作会导致安全错误。

阅读this answer后，我将THREE.TextureLoader()设置为允许跨域加载：

var loader = new THREE.TextureLoader();
//allow cross origin loading
loader.crossOrigin = '';
var texture = loader.load(
   url_to_image,
   // Function when resource is loaded
   function ( texture ) {
     var backgroundMesh = new THREE.Mesh(
       new THREE.PlaneGeometry(2, 2, 0),
       new THREE.MeshBasicMaterial({
            map: texture
        })
      );
     backgroundMesh.material.depthTest = false;
     backgroundMesh.material.depthWrite = false;

     // create your background scene
     backgroundScene = new THREE.Scene();
     backgroundCamera = new THREE.Camera();
     backgroundScene.add( backgroundCamera );
     backgroundScene.add( backgroundMesh );

   },
   // Function called when download progresses
   function ( xhr ) {},
   // Function called when download errors
   function ( xhr ) {}
);

但是，我现在收到 CORS 错误：Access to Image at 'url_to_image' from origin 'my_domain' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'my_domain' is therefore not allowed access.

this answer 的评论似乎表明某些域不允许在 WebGL 中使用浏览器中的图像，我该如何确定是否是这种情况？

如果我从中提取图像的域没有问题，我怎样才能让它工作？

【问题讨论】：

标签： canvas three.js http-headers cors

【解决方案1】：

好吧，从您收到的错误消息来看，您请求图像的域不支持跨源资源共享。

如果您控制该域上的资源，则需要在响应中添加适当的“Access-Control-Allow-Origin”标头。

如果您不控制域，那么您在浏览器中几乎无能为力（除了使用 CORS 代理），因为 CORS 的重点是您的 JS 不应该能够访问如果托管资源的域未明确启用 CORS，则请求。

【讨论】：

我不控制域。您能否解释一下如何使用 CORS 代理？
有一些公开的，例如crossorigin.me。否则，您将需要设置自己的服务器，正如 K.Miao 在另一个答案中指出的那样。

【解决方案2】：

使用您的服务器将您的图像请求转发到资源域。

应该是这样的：

您的浏览器 ===> 您的服务器 ===> 图片

您当前所做的是直接在浏览器中获取图像，这意味着您要跨越两个域（一个是您的服务器，另一个是图像资源域）。但是通过使用服务器转发您的请求，您的浏览器只会向您的服务器发送请求，从而避免违反 CORS。

大多数浏览器都禁止跨域。但是，您可以通过配置浏览器手动禁用 CORS 限制。例如，在 Safari 中，您可以在Develop 菜单中选择Disable Cross-Origin Restrictions。

【讨论】：