javascript - 跨源资源共享策略拒绝跨源图像加载

Question

我使用 html2canvas(来自 html2canvas.hertzen.com)来捕获屏幕截图。我收到这样的奇怪错误: 我的网页代码放在一台主机上，比如说主机A。 如果我的网页包含另一台主机(例如主机 B)上的图像，那么我会遇到此错误: 跨源图像加载被跨源资源共享策略拒绝

但是，令人困惑的部分是，如果主机 B 是 facebook(我的图片是 facebook https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/372701_100000684388457_1551561655_q.jpg 的直接链接)，那么错误就会消失。

我的功能

html2canvas([document.body], {
                    useCORS : true,
                    logging : true,
                    onrendered : function(canvas) {
                        document.body.appendChild(canvas);
                        var myImage = canvas.toDataURL("image/png");
                        window.open(myImage);
                    }

有人有提示吗？谢谢

解决方案

 html2canvas([document.body], {
                                    useCORS: true,
                                    proxy: "Server",
                                    onrendered : function(canvas) {                               
                                        ListUCapture = canvas.toDataURL("image/png");                                                           
                                    }
                     });
Server is server of node.js

Answer 1

如果您希望将跨源图像加载到 Canvas 上，则需要使用跨源 header 或在同一源下提供图像。 Facebook 下的该图像使用以下 header 选项集提供:

访问控制允许来源:*

意思是，它可以使用useCORS选项进行跨域加载。但是，您的主机 B 似乎没有为它们提供跨域 header 设置。