javascript - 如何设置跨源 header 以允许数据 URL？

Question

我有一个 JavaScript 脚本，它接受一个 SVG 字符串并尝试将它放在 Canvas 上(对其进行栅格化)。这在 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 对象，我反而会得到一个 跨源资源共享策略拒绝跨源图像加载。 错误。我在该站点的 .htaccess 文件中包含以下内容:

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

但是因为这是一个 data: URL，所以没有被查询？如何为创建自己的 data: URL 的此类脚本正确设置跨源资源共享 header ？

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