为什么在crossOrigin ='Anonymous'图像上设置base64数据时,Safari会抛出CORS错误?

Bed*_*ede 11 javascript safari base64 image cors

我有一个问题,即将图像src(使用创建的图像new Image)设置为base64编码图像失败,抛出: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

image.crossOrigin = 'Anonymous'已经.

请参阅以下codepen:http://codepen.io/bedeoverend/pen/aORQzg .它适用于Chrome,但不适用于Safari.如果有效,黑白饼图图像应显示在底部.

为什么会发生这种情况以及如何解决?

更新:

为了澄清,我在这里做了一个更有针对性的codepen:http://codepen.io/bedeoverend/pen/BNGarr

似乎crossOrigin = 'Anonymous'在Safari上设置图像然后在base64中加载失败.两个文本都Worked...在Chrome 44上更改,但在Safari 8.0.3上,交叉源Anonymous失败了.编辑:Firefox 35和39也失败了.

所以问题基本上是现在,为什么,当Image的crossOrigin属性设置为'Anonymous'时,Safari是否无法加载base64图像?

Kai*_*ido 10

MDN声明"您必须拥有一个托管具有相应Access-Control-Allow-Origin标头的图像的服务器".

根据规格,
强调我的

遗憾的是,这可用于执行用户本地网络的基本端口扫描[...]用户代理可以实现比上述更严格的跨源访问控制策略以缓解此攻击,但不幸的是,此类策略是通常与现有的Web内容不兼容."

您可以通过检查url字符串来简单地解决它,如果它开始,data:那么它可能不会与交叉原始标头一起提供,那么您可以将crossOrigin属性设置回null.