为什么Safari在crossOrigin =＆＃39; Anonymous＆＃39;上设置base64数据时会抛出CORS错误。图片？

Question

我遇到的问题是将图像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。如果有效，黑白饼图图像应显示在底部。

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

更新：

为了澄清，我在这里制作了一个更有针对性的代码集：http://codepen.io/bedeoverend/pen/BNGarr

似乎在图像上设置crossOrigin = 'Anonymous'然后在base64中加载会失败。在Chrome 44上，这两个文本都更改为Worked...，但在Safari 8.0.3上，交叉源匿名版本失败了。编辑：在Firefox 35＆amp; 39。

所以问题基本上是现在，为什么，当Image的crossOrigin属性被设置为“Anonymous＆＃39;”时，Safari是否无法加载base64图像？

Answer 1

MDN表示＆＃34;您必须拥有一个托管具有相应Access-Control-Allow-Origin标头图像的服务器。＆＃34;

根据to specs，
_强调我的

  

遗憾的是，这可用于执行用户本地网络的基本端口扫描[...] 用户代理可以实现<的原始访问控制策略<比上述更强>更严格以缓解此攻击，但不幸的是，此类策略通常与现有Web内容不兼容。＆＃34;

您可以通过检查url字符串来解决问题，如果它以data:开头，那么它可能无法使用交叉原始标头，那么您可以设置{{ 1}}属性返回crossOrigin。