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

Question

我有一个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对象添加了一个img.crossOrigin='' ，那么我会Cross-origin image load denied by Cross-Origin Resource Sharing policy.获得Cross-origin image load denied by Cross-Origin Resource Sharing policy. 错误。 我在此网站的.htaccess文件中有以下内容：

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

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

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