react基于html2canvas实现图片下载以及资源跨域问题的解决

案例:

在React项目中想要实现用户通过弹框以图片的形式下载作品认证信息的功能,在点击显示认证信息时,向服务器请求该作品信息(获取图片路径),之后渲染图片以及相关信息到弹框中(下图绿色部分),点击下载按钮实现下载(下图蓝色部分)。请求来的图片能展示,但是下载时就不能显示了

图1


问题:

1、此时打开控制台发现有这样的报错:

× Access to image at '服务器上图片地址' from origin '请求图片的地址' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

意思就是 > 该请求已被CORS策略阻止:请求的资源上没有 “ Access Control Allow Origin ” 标头。


2、同样网络一栏也有 “ CORS错误 ” 的报错

在这里插入图片描述


3、查看相应的响应标头确实没有“ Access Control Allow Origin ”

在这里插入图片描述


4、在这时大概知道是跨域问题,但是没找到根本上的解决办法

查阅许多文章,大致需要从这么几个方面入手
(1)在html2canvas使用处进行跨域问题的设置(即添加 useCORS: true )[ 已采用 ]
(2)将图片转成base64再截图或下载 [ 已采用 ]
(3)在img标签里添加crossorigin="anonymous"属性;
(前端可以参考这篇文章:下载功能的实现以及相关设置

[ 但最主要的问题还是我们所获取的资源没有响应标头,资源被浏览器拦截
这里是有关 跨源资源共享(CORS)的文档,中间提到了 HTTP 响应首部字段HTTP 请求首部字段 即我们需要为资源添加的字段 ]


解决

最后由后端为资源添加响应标头,在Access-Control-Allow-Origin:处添加允许请求该资源的地址,就是前文说到需要下载图片的地址

在这里插入图片描述

这样就成功获取并下载了在这里插入图片描述

(注)还有一种办法是html2canvas官方文档说到的配置代理,这里项目组后端试过用nginx进行了跨域请求的设置,但是没达到预期效果,或许是方法问题,于是采用的上述方法实现


参考文章:

跨源资源共享(CORS)
使用html2canvas在前端生成图片
html2canvas 处理跨域图片的解决方案
记录html2canvas前端海报绘制,图片跨域导致绘制失败,下载的海报没有网络图片问题纯前端解决

猜你喜欢

转载自blog.csdn.net/qq_51247028/article/details/125278328
今日推荐