如何设置跨域标头以允许数据 URL？答案

【问题标题】：How to set Cross-Origin headers to allow Data URLs?如何设置跨域标头以允许数据 URL？
【发布时间】：2019-08-01 20:36:15
【问题描述】：

我有一个 javascript 脚本，它接受一个 SVG 字符串并尝试将其放在画布上（将其栅格化）。这在 Chrome 和 Firefox 中运行良好，但 Safari 会抛出错误：

var img = new Image();
img.onload(function() {
  context.drawImage(img, 0,0);
  exportImage.src = canvas.toDataURL('image/png');
});
img.src="data:image/svg+xml;utf8,<svg>...</svg>";

以这种方式完成后，Safari 在toDataURL() 调用中抛出错误：

SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

如果我在设置src 之前将img.crossOrigin='' 添加到img 对象，则会收到Cross-origin image load denied by Cross-Origin Resource Sharing policy. 错误。我的 .htaccess 文件中有以下内容：

Header set Access-Control-Allow-Origin "*"

但由于这是一个data: URL，这不是被查询的吗？如何为创建自己的data: URL 的此类脚本正确设置跨域资源共享标头？

【问题讨论】：

我看不到 CORS 标头与这里的任何内容有什么关系，因为不涉及 HTTP 请求。
我同意，但这就是 Safari 似乎在抱怨的问题，而这正是我想要解决的问题。那么，这是 Safari 中的错误吗？
It might be related to this Chromium issue.
在 IE11 中看到完全相同的问题。

标签： javascript svg cors

【解决方案1】：

您可以使用blobURL 代替dataURL。 blobURL 目前没有跨域问题。

见Blob和objectURL。

var img = new Image();
img.onload(function() {
  context.drawImage(img, 0,0);
  exportImage.src = canvas.toDataURL('image/png');
});
img.src=URL.createObjectURL(new Blob(['<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="0" y="0" height="100" width="100" fill="#00f"/></svg>'], {type : 'image/svg+xml'}));

【讨论】：