canvas toDataURL 跨域问题 设置了crossOrigin = 'anonymous' 并没有完全解决问题

Question

今天写了一个生成海报的H5，微信端的，其中海报有一块要拿到用户的头像，并绘制到canvas上，头像是拿到了，加载的时候也给图片加上crossOrigin = 'anonymous'的属性了，在获取canvas的base64位的图片时，出现问题了；
其中有一个图片的是后端给我的微信头像的路径，微信源的，跨域了；

图片加载完成执行ck回调
ck函数里执行的是canvas的绘制，已经最后toDataURL拿到canvas的图片路径

经测试后，发现有的手机微信端打开，toDataURL可以获得正常的base64的图片，也就是说跨域的微信头像可以通过toDataURL拿到；
另有一部分手机报错了，toDataURL拿不到任何东西；
求大神深层次讲解一下，很懵，这个问题到底前端能不能自己解决，已经完全解决。
通过百度感觉前端很难自己完全解决。。。。
求大神讲解

Answer 1

如果用到nginx，可以在nginx的location里面加上下面这行代码试试：

add_header 'Access-Control-Allow-Origin' '*';

Answer 2

同样遇到这样的问题，但是我怎么把后台提供的二维码连接（不是图片链接），同样作为动态的值，合成到海报上啊？

Answer 3

不算答案的答案

按照你的描述，我觉得问题不是出在前端能否做到，
而是在于各个移动端浏览器厂商对跨域限制的处理不是一致的，
协议是死的，人是活的。人家就是不遵守，你也没办法。

这个问题光靠前端基本搞不定，所以在后端做一层跨域代理我觉得是唯一的解决办法

Answer 4

前端只设置crossorign是不行的，后台服务器还要返回access.control.allow.origin。还有个需要注意的地方，图片前端有没有缓存。再有的浏览器下第一次访问ok，再次刷新访问我就拿不到数据了。

Answer 5

vue 配代理 '/aliyuncs': {
        target: 'http://bndxfk.oss-cn-shenzhen...',  //目标接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/aliyuncs': '/'   //重写接口
        }
      }

  
  页面使用
  async inits() {

                var res = await axios.get(
                    "/aliyuncs/ah/20200907083638SNSn.png?Expires=1599535724&OSSAccessKeyId=LTAI4FzmqbQ5KuYaDKUZtVJd&Signature=JuFvvhnX3Sh6BrlR7c30s7XlXW8%3D", {
                        responseType: 'blob'
                    })
                console.log('>>>>>>>>>>>>resresres', res);
                var file_base64 = this.blobToBase64(res.data,(result)=>{
                console.log('>>>>>>>>>>>>result',result);
                }) 
                // console.log('>>>>>>>>>>>>file_base64', file_base64);
            },
            blobToBase64(blob, callback) {
                let a = new FileReader();
                a.onload = function (e) {
                    callback(e.target.result);
                }
                a.readAsDataURL(blob);
            },