说一下做项目时需要用到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
完美解决 眼泪都要掉下来了 太感人了
本文链接: http://unicros.immuno-online.com/view-709974.html