快速解决Canvas.toDataURL 图片跨域的问题_基础知识
程序员文章站
2022-04-24 09:49:05
...
如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题:
【Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sub2.xx.com' is therefore not allowed access.】
解决方案:
根据错误分析需要在控制头增加“Access-Control-Allow-Origin”,即允许访问源文件权限,那么我们对这个页面【注意是要输出页面的图片】这样处理:
var img = new Image; img.onload = myLoader; img.crossOrigin = 'anonymous'; //可选值:anonymous,* img.src = 'http://myurl.com/....';
或者是HTML中
核心是请求头中包含了 Origin: "anonymous"或"*" 字段,响应头中就会附加上 Access-Control-Allow-Origin: * 字段,问题解决。
以上这篇快速解决Canvas.toDataURL 图片跨域的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
-
ThinkPHP框架实现session跨域问题的解决方法
-
Springboot解决ajax+自定义headers的跨域请求问题
-
基于axios 解决跨域cookie丢失的问题
-
PHP关于IE下的iframe跨域导致session丢失问题解决方法
-
使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】
-
Vue 项目中遇到的跨域问题及解决方法(后台php)
-
django解决跨域请求的问题
-
解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
-
ajax跨域访问遇到的问题及解决方案
-
详解html5 postMessage解决跨域通信的问题