为什么在crossOrigin ='Anonymous'图像上设置base64数据时，Safari会抛出CORS错误？ [英] Why does Safari throw CORS error when setting base64 data on a crossOrigin = 'Anonymous' image?

问题描述

我遇到一个问题，即将图像src（使用 new Image 创建的图像）设置为base64编码图像失败，抛出：
跨源资源共享策略拒绝跨源图像加载。

I'm having an issue where setting an image src (image created with new Image) to a base64 encoded image fails by throwing: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

我有 image.crossOrigin ='匿名'已经。

请参阅以下代码集： http://codepen.io/bedeoverend/pen/aORQzg 。它适用于Chrome，但不适用于Safari。如果它起作用，黑白饼图图像应显示在底部。

See the following codepen: http://codepen.io/bedeoverend/pen/aORQzg. It works in Chrome, but not in Safari. The black and white pie chart image should show up down the bottom if it worked.

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

Why does this happen and how can it be resolved?

更新：

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

To clarify, I've made a more focused codepen here: http://codepen.io/bedeoverend/pen/BNGarr

似乎设置对于图像，crossOrigin ='Anonymous'然后在base64中加载失败。在Chrome 44上，两个文本都更改为 Worked ... ，但在Safari 8.0.3上，交叉源Anonymous失败。编辑：在Firefox 35& 39。

It seems that setting crossOrigin = 'Anonymous' on an image then loading in base64 fails for Safari. Both text changes to Worked... on Chrome 44, but on Safari 8.0.3, the cross origin Anonymous one fails. Also fails on Firefox 35 & 39.

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

So the question is essentially now, why, when an Image's crossOrigin property is set to 'Anonymous', does Safari fail to load base64 images in?

推荐答案

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

MDN states that "You must have a server hosting images with the appropriate Access-Control-Allow-Origin header."

根据 to specs ，

_强调我的

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

This, unfortunately, can be used to perform a rudimentary port scan of the user's local network [...] User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content."

你可以通过检查 url 字符串来解决它，如果它以数据开头：然后它可能不会与cross origin头一起提供，那么你可以将 crossOrigin 属性设置回 null 。

You could simply workaround it by checking the url string, if it starts with data: then it probably won't be served with the cross origin header, then you can set the crossOrigin property back to null.

这篇关于为什么在crossOrigin ='Anonymous'图像上设置base64数据时，Safari会抛出CORS错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！