getImageData、drawImage、toDataURL 等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跨域问题的原因。
Comments | NOTHING