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

我有一个 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() call:

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

如果我添加一个img.crossOrigin='' to the img在设置对象之前src，我反而得到一个Cross-origin image load denied by Cross-Origin Resource Sharing policy.错误。我的中有以下内容.htaccess本网站的文件：

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

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

您可以使用blobURL https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL代替dataURL. blobURL https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL目前没有跨域问题。

see Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob and 对象URL https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL.

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'}));