在多数现代浏览器中我们都可能会遇到图片跨域被阻止的问题,一般来说跨域问题主要出现在前后端分离,云架构的web系统中。 在两年前的时候通过网上的搜索勉强应付了问题,但是每次使用或多或少还会有需要解决的小问题。这次弄清楚了之后发现之前网上大多数也都是一知半解,并没有解决核心问题,所以导致了瞎试,碰运气的方式来处理。

首先html2canvas跨域问题的原因 我们希望将html渲染为canvas 进而渲染为图像,这就需要将html中的资源加载到临时的canvas中,而这个时候,如果资源和当前页面不同源,就会被canvas认为有污染拒绝加载。这是出于浏览器出于安全的角度做的一个设定。

在这个时候,我们需要做的其实比较简单,在所有因为跨域被拒绝的资源从服务端返回一个header

Access-Control-Allow-Origin: https://aaa.bbb.com
Access-Control-Allow-Methods: POST, GET, PUT, DELETE

诸如网上的一些都是,不需要的:

Access-Control-Expose-Headers: 
Access-Control-Allow-Credentials: true

以阿里云OSS跨域做个说明, 在阿里云OSS后台的基础设置中,我们可以添加跨域设置。 来源:http://aaa.bbb.com METHODS: GET,POST (如果只针对于显示图片 GET就可以了) 允许headers,暴露headers都留空即可。 缓存时间留空或者写一个秒为单位的数字即可。

设置完之后,正常的跨域上传、跨域访问图片就已经可以正常工作了。(比如阿里云的JSSDK上传)

但是我们在html2canvas的部分,依旧是会报跨域问题。 这里的原因是,我们没有在访问跨域图片的时候,发送 origin 参数,这个origin参数需要时我们刚才在后台允许的 来源列表中。

我们为图片或其他资源添加origin可以直接写入到元素中,也可以通过js来添加

<img src="......." crossorigin="https://aaa.bbb.com" > <!-- 图片会发送跨域来源 -->
// var img = new Image();  
// var img = document.querySelector('img');
img.src = "......"; // 图片地址
img.crossOrigin = "https://aaa.bbb.com"; // 跨域来源

这时,我们通过浏览器的开发者工具查看网络请求,即可以看到Request中有一项: Origin: https://aaa.bbb.com

此时跨域问题得到精确解决。

标签: html2canvas, 跨域, 阿里云oss, canvas污染

添加新评论