canvas 跨域问题

发布于 2020-12-05  351 次阅读 本文共946个字


getImageDatadrawImagetoDataURL 等API都是我们在使用canvas的时候常用到的。有时候我们在使用的时候,可能会遇到如:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvased may not be exported.

SecurityError: The operation is insecure.

No 'Access-Control-Allow-Origin' header is present on the requested resource.

等等上述的问题,都是由于 跨域 导致,那么怎么解决呢? 有个属性叫做: crossOrigin 可以试一下。

MDN中介绍的很清楚,在HTML5中,一些 HTML 元素提供了对 CORS 的支持, 例如 <audio><img><link><script> 和 <video> 均有一个跨域属性 (crossOrigin property),它允许你配置元素获取数据的 CORS 请求。

crossOrigin有以下枚举值:

关键字描述
anonymous对此元素的 CORS 请求将不设置凭据标志。
use-credentials对此元素的CORS请求将设置凭证标志;这意味着请求将提供凭据。
""设置一个空的值,如 anonymous 或 crossOrigin="",和设置anonymous 的效果一样。

再解释一下:

默认没有crossOrigin属性,如果有crossOrigin属性并且值为use-credentials,同样也都会有跨域问题,但是两者是有区别的。

如果有crossOrigin属性,但是值不是use-credentials,那么都会被解析为anonymous

crossOrigin="anonymous",相当于告诉服务器,你不要带任何非匿名信息过来,因此,浏览器肯定是安全的。这也就是为什么该属性能解决canvas跨域问题的原因。


努力,只为遇见更好的自己!