为什么在 crossOrigin = 'Anonymous' 图像上设置 base64 数据时 Safari 会抛出 CORS 错误？
Why does Safari throw CORS error when setting base64 data on a crossOrigin = 'Anonymous' image?
我遇到一个问题，将图像 src（使用 new Image 创建的图像）设置为 base64 编码图像失败，抛出：
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
我已经image.crossOrigin = 'Anonymous'了。
请参阅以下代码笔：http://codepen.io/bedeoverend/pen/aORQzg。它适用于 Chrome，但不适用于 Safari。如果有效，黑白饼图图像应该显示在底部。
为什么会发生这种情况，如何解决？
更新：
为了澄清，我在这里做了一个更有针对性的代码笔：http://codepen.io/bedeoverend/pen/BNGarr
似乎在图像上设置 crossOrigin = 'Anonymous' 然后以 base64 加载 Safari 失败。在 Chrome 44 上，两个文本都更改为 Worked...，但在 Safari 8.0.3 上，跨源 Anonymous 失败。编辑：在 Firefox 35 和 39 上也失败。
所以现在的问题本质上是，为什么当图像的 crossOrigin 属性 设置为 'Anonymous' 时，Safari 无法加载 base64 图像？
MDN 表示 "You must have a server hosting images with the appropriate Access-Control-Allow-Origin header."
根据to specs,
强调我的
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 字符串来简单地解决它，如果它以 data: 开头，那么它可能不会与交叉来源 header 一起提供，那么您可以将 crossOrigin 属性 设置回 null.
我遇到一个问题，将图像 src（使用 new Image 创建的图像）设置为 base64 编码图像失败，抛出：
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
我已经image.crossOrigin = 'Anonymous'了。
请参阅以下代码笔：http://codepen.io/bedeoverend/pen/aORQzg。它适用于 Chrome，但不适用于 Safari。如果有效，黑白饼图图像应该显示在底部。
为什么会发生这种情况，如何解决？
更新：
为了澄清，我在这里做了一个更有针对性的代码笔：http://codepen.io/bedeoverend/pen/BNGarr
似乎在图像上设置 crossOrigin = 'Anonymous' 然后以 base64 加载 Safari 失败。在 Chrome 44 上，两个文本都更改为 Worked...，但在 Safari 8.0.3 上，跨源 Anonymous 失败。编辑：在 Firefox 35 和 39 上也失败。
所以现在的问题本质上是，为什么当图像的 crossOrigin 属性 设置为 'Anonymous' 时，Safari 无法加载 base64 图像？
MDN 表示 "You must have a server hosting images with the appropriate Access-Control-Allow-Origin header."
根据to specs,
强调我的
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 字符串来简单地解决它，如果它以 data: 开头，那么它可能不会与交叉来源 header 一起提供，那么您可以将 crossOrigin 属性 设置回 null.