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

【问题标题】：Why does Safari throw CORS error when setting base64 data on a crossOrigin = 'Anonymous' image?为什么在 crossOrigin = 'Anonymous' 图像上设置 base64 数据时，Safari 会抛出 CORS 错误？
【发布时间】：2015-10-17 01:09:57
【问题描述】：

我遇到一个问题，将图像 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 上，跨源匿名一个失败。编辑：在 Firefox 35 和 39 上也失败了。

所以问题本质上是现在，为什么当图像的 crossOrigin 属性设置为“匿名”时，Safari 无法加载 base64 图像？

【问题讨论】：

您在 codepen 上的 safari 中也有问题吗？我读过 safari 在数据 uri 和 file:/// uris 方面存在问题
正确，只是在 safari 上。 codepen 在 chrome 上运行良好
问题实际上来自您的worked 函数：updated codepen 现在，至于为什么？嗯......不知道......但无论如何，将您附加两个不同 onload 事件的 img 的 src 更改两倍似乎很奇怪。
@Kaiido 在我的问题上看到更新的 codepen，这应该可以解决问题 - 两次加载/更改 src 只是为了让我可以将其转换为 base64 以证明它失败。我已经更新了问题以准确显示出了什么问题：当 crossOrigin 设置为匿名时，Safari 似乎不喜欢 base64
看起来这是一个 webkit 错误，如所见：bugs.webkit.org/show_bug.cgi?id=123978 然后链接到其他错误，似乎都没有解决。

标签： javascript image safari base64 cors

【解决方案1】：

MDN 声明“您必须有一个服务器托管具有适当的 Access-Control-Allow-Origin 标头的图像。”

根据to specs，
_强调我的

不幸的是，这可以用来对用户的本地网络执行基本的端口扫描[...]用户代理可以实施更严格比上述那些来减轻这种攻击，但不幸的是，这些策略通常与现有的 Web 内容不兼容。”

您可以通过检查url 字符串来简单地解决它，如果它以data: 开头，那么它可能不会与跨域标头一起提供，那么您可以将crossOrigin 属性设置回@987654326 @。

【讨论】：