如何设置跨源标头以允许数据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.

如果我加入img.crossOrigin=''到img设置其之前的对象src,而不是我得到一个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'}));