跨域资源共享策略拒绝跨域图像加载 [英] Cross-origin image load denied by Cross-Origin Resource Sharing policy
问题描述
我使用html2canvas(来自html2canvas.hertzen.com)捕获屏幕截图.我收到这样的奇怪错误: 我网页的代码放在一个主机上,例如主机A. 如果我的网页包含另一个主机(例如主机B)上的图像,则出现此错误: 跨域资源共享策略拒绝跨域图像加载
I use html2canvas (from html2canvas.hertzen.com) to capture screenshot. I got this strange error like this: The code of my webpage is put on one host, say Host A. If my webpage contains an image on another host, say Host B, then I hit this error: Cross-origin image load denied by Cross-Origin Resource Sharing policy
但是,令人困惑的部分是,如果主机B是facebook(我的图像是指向Facebook的直接链接
However, the confusing part is that if Host B is facebook (my image is a direct link to facebook https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/372701_100000684388457_1551561655_q.jpg) then the error disappear.
我的功能
html2canvas([document.body], {
useCORS : true,
logging : true,
onrendered : function(canvas) {
document.body.appendChild(canvas);
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
有人给小费吗? Tks
Anyone got a tip? Tks
解决方案
html2canvas([document.body], {
useCORS: true,
proxy: "Server",
onrendered : function(canvas) {
ListUCapture = canvas.toDataURL("image/png");
}
});
Server is server of node.js
推荐答案
如果希望将跨域图像加载到画布上,则需要使用跨域标头或在相同的源下提供该图像. Facebook下的该图片带有以下标头选项集:
If you wish to load cross-origin images to a canvas, you need to either serve the image with cross-origin headers or under the same origin. That image under Facebook is served with the following header option set:
Access-Control-Allow-Origin:*
表示,可以使用useCORS
选项进行跨域加载.但是,您的主机B似乎没有为其设置跨域标头来为它们提供服务.
Meaning, it can be cross-origin loaded with the useCORS
option. However, it would appear that your Host B isn't serving them with cross-origin headers set.
这篇关于跨域资源共享策略拒绝跨域图像加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!