说一下做项目时需要用到html2canvas做项目截图踩到的跨域坑。

项目需要拉取用户的头像,而linkedin和微信的头像存放于cdn中,这边涉及到的跨域问题。

坑1:

由于跨域, 画布被污染,不能调用 toBlob(), toDataURL() 或 getImageData() 方法,调用它们会抛出安全错误。

按网上说的做,

        配置 useCORS: true,

        Nginx添加请求头

                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Credentials: true;

成功解决了画布被污染的问题。然而这种解决方法只可以解决你自己服务器的问题,你总不能去微信或其他第三方服务器添加请求头吧。。。更大的坑来了

坑2:

被对方服务器拒绝图片请求。

Access to Image 'https://media.licdn.com/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink_100_100/0?e=1573689600&v=beta&t=8TqbDk8iWCXXXXXXXXXXXXXXXXXXXXX' has been blocked from origin '127.0.0.1:8000'

尝试了各种方法,包括

        在img标签上添加crossorigin = "anonymous";

        前端页面设置<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />;

        Nginx设置 add_header Cache-Control no-store;

都没有成功。

最后还是由Nginx解决,分两部步

第一步:

       首先将服务器保存的第三方cdn链接

              ‘https://media.licdn.com/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink_100_100/0?e=1573689600&v=beta&t=8TqbDk8iWCXXXXXXXXXXXXXXXXXXXXX

       保存为 :

              "本地域名/third_image/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink_100_100/0?e=1573689600&v=beta&t=8TqbDk8iWCXXXXXXXXXXXXXXXXXXXXX"

       访问第三方的域名涉及到跨域,但是访问本地的其他资源文件夹是OK的。

第二部:

       然后在Nginx设置一下代理

       location ^~ /third_image/ {
              add_header 'Access-Control-Allow-Origin' "$http_origin" always;
              add_header 'Access-Control-Allow-Credentials' 'true' always;
              add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
              add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-  Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
              proxy_pass https://media.licdn.com/;
       }

也就是:

把            https://media.licdn.com/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink_100_100/0?e=1573689600&v=beta&t=8TqbDk8iWCXXXXXXXXXXXXXXXXXXXXX
保存为     https://本地域名/third_image/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink_100_100/0?e=1573689600&v=beta&t=8TqbDk8iWCXXXXXXXXXXXXXXXXXXXXX

最后由Nginx代理为  https://media.licdn.com/dms/image/C5603AQHCky1Ku581hg/profile-displayphoto-shrink_100_100/0?e=1573689600&v=beta&t=8TqbDk8iWCXXXXXXXXXXXXXXXXXXXXX
 

完美解决!眼泪都要掉下来了,太感人了

更新啦更新啦~~~~ 推荐大家阅读我的最新原理解析篇呀:解决跨域问题 has been blocked by CORS policy 后续,原理解析篇

       

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐