为什么在 crossOrigin = 'Anonymous' 图像上设置 base64 数据时，Safa
时间：2023-09-30问题描述
我遇到一个问题，将图像 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 = 'Anonymous'了.
请参阅以下代码笔: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' 然后在 Safari 中加载 base64 失败.在 Chrome 44 上，这两个文本都更改为 Worked...，但在 Safari 8.0.3 上，跨源匿名一个失败.在 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.
所以现在的问题本质上是，为什么当图像的 crossOrigin 属性设置为匿名"时，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."
根据到规格,
强调我的
不幸的是，这可用于对用户的本地网络执行基本的端口扫描[...]用户代理可以实施更严格<的跨域访问控制策略/strong> 比上面描述的更能减轻这种攻击，但不幸的是，这些策略通常与现有的 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 字符串来简单地解决它，如果它以 data: 开头，那么它可能不会与跨源标头一起提供，那么您可以将 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 错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
相关文章
layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }- 在 JavaScript 中下载 PDF Blob 时出现问题
- Javascript - 从 base64 图像获取扩展名
- 如何在 JavaScript 中缩放图像(数据 URI 格式)(实际缩放，不使用样式)
- 在 Chrome 中打开 blob objectURL
- 使用 localStorage 进行 javascript 字符串压缩
- 如何解码 base64 编码的字体信息?
- 将 dataURL(base64) 保存到 PhoneGap (android) 上的文件
- 将 svg 转换为 base64
- 将 PNG Base-64 字符串转换为 TIFF Base-64 字符串
- 如何在不本地保存的情况下将 base64 数据传输到可读的图像流中