先从项目中的需求说起，H5页面中内嵌一个二维码图片，二维码图片要跟原生app进行交互传输base64图片信息到手机，保存到相册中。
试了几张图片，完美，很轻松搞定。然鹅，当调试接口的时候后端同学返回了真正的微信生成的二维码，交互保存二维码的时候，“duang”,
报错了，下载的图片是空白的。
控制台报错如下:
Access to image at '[https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQEI8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyanRDUVlqY2lhQVUxZ1JZMmh0Y2YAAgQ1rxpdAwQAjScA](https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQEI8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyanRDUVlqY2lhQVUxZ1JZMmh0Y2YAAgQ1rxpdAwQAjScA)' from origin '[http://10.39.74.104:9000](http://10.39.74.104:9000)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
image.png
很明显的跨域问题啊，按照常理是应该服务端或者运维去解决的。很悲惨的是服务端同学在关键时刻请假两天...
试着能不能从前端解决下吧，毕竟我是外行，也不确信自己的想法究竟对不对。
刚开始猜想是不是我的截图框架有问题,我用的 ** html2canvas**,
一番搜索，大家提供的解决方案中都明确表示需要服务端和运维去解决这个问题。
html2canvas - 解决办法之图片跨域导致的截图空白
html2canvas绘制微信头像跨域问题
又想着手动下载图片后，再手动转换base64是否可行，尝试之后，在下载的过程中就发生了跨域错误，即微信的服务器禁止了从我的域名进行通信。
ajax请求真的是无解，那么问题的根结就确定是如何解决跨域或者如何绕过跨域。
- 关于如何解决跨域上面的链接中有两种方案，细看链接内容即可。这里不得不说一下H5的截图框架 html2canvas真的是很操蛋，截图的内容并非看到的真实内容，而且实际截图效果相当模糊！！
- 那么有没有更好的方案可以绕过跨域并且下载的图片还比较清晰？
他来了，他来了！爱情真的好残忍...
既然ajax请求会有跨域的问题，那么让服务端代替我跟微信的服务器进行通信，把实际图片的base64编码返回是否可行？实际测试效果杠杠滴，图片相当清晰，传输的数据二维码图片50-100kb，我个人认为在可接受范围内。
值得注意的是如果服务端同学在返回的base64字符串中未拼接前缀:
data:image/png;base64,
则需要在前端手动拼上，否则 img的src无法渲染base64字符串
网友评论