我已经读过Facebook已经为Profile Pictures交叉启用的地方.我不确定专辑和其他内容,但实际上Facebook在我测试过的每个网址上都包含了标题Access-Control-Allow-Origin:*.
我已经尝试过标准的个人资料图片网址
https://graph.facebook.com/PROFILE_ID/picture?width=25&height=25
以及Akamai的网址:
https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash3/...
(后者由https://graph.facebook.com/PROFILE_ID/photos返回)
我的应用程序基本上是这样做的:
var img = new Image; img.src = "https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash3/..."; img.crossOrigin = "Anonymous"; img.onload = function() { ctx.drawImage(img,x,y); } // Above code will be repeated several times // And mixed with code that manipulates ctx // Finally generetes data var generatedImage = canvas.toDataURL(); // And post if back to Facebook
我的代码似乎一切正常(在所有主流浏览器上都经过测试),但是有很多用户在将画布内容上传回Facebook时报告间歇性错误.
不幸的是,我还不能让精通技术的用户报告具有正确错误描述的内容.现在我无法重现问题(甚至不知道问题是什么).
到目前为止,我所知道的是,通过编写服务器端代理来为Facebook图像提供服务,好像它们是本地的,这些错误显然已经消失了,所以,在我开始挖掘奇怪的跨浏览器问题之前,它让我感到疑惑,神秘的错误信息如此作为OAuthException:发生了未知错误.,受污染的卡瓦斯等,我首先要回到基础:
解决方法
再次回答我自己的问题.
显然是的,通过Graph API公开的每张图片都启用了CORS.他们都使用Access-Control-Allow-Origin返回:*.
似乎有些浏览器不能很好地使用crossorigin =’anonymous’和CORS标头,因此,目前,代理服务仍然是安全的方式.