当前位置:Gxlcms > PHP教程 > javascript-canvas的图片来源于api.xx.com,当前的域是m.xx.com,调用canvas.toDataURL(),就报跨域

javascript-canvas的图片来源于api.xx.com,当前的域是m.xx.com,调用canvas.toDataURL(),就报跨域

时间:2021-07-01 10:21:17 帮助过:4人阅读

一个项目使用了Html5的Canvas画布标签,canvas显示的图片来源于api.xx.com这个子域名,当前页面的域是m.xx.com,一旦通过JS来调用:canvas.toDataURL(),就会报跨域的问题:

Redirect at origin 'http://api.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://m.xx.com' is therefore not allowed access.

请问又拍云是否有相关的解决方案,或者能否加上关于图片跨域请求的头部Access-Control-Allow-Origin开放控制呢?

如何在请求的图片的头部添加Access-Control-Allow-Origin这个呢

回复内容:

一个项目使用了Html5的Canvas画布标签,canvas显示的图片来源于api.xx.com这个子域名,当前页面的域是m.xx.com,一旦通过JS来调用:canvas.toDataURL(),就会报跨域的问题:

Redirect at origin 'http://api.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://m.xx.com' is therefore not allowed access.

请问又拍云是否有相关的解决方案,或者能否加上关于图片跨域请求的头部Access-Control-Allow-Origin开放控制呢?

如何在请求的图片的头部添加Access-Control-Allow-Origin这个呢

之前有遇到过这个问题,也是子域名不同的跨域,因为使用的图片不是在同一个服务器上。
当时采用的解决办法是通过服务端将图片文件内容获取到,然后在html页面输出,这样子的话,是可以解决图片跨域问题的。(但是可能文不对题!)

加上img.crossOrigin = "Anonymous"
Access-Control-Allow-Origin这东东是后台发送过来的
之前我也遇过这种问题,但没这样处理,因为一些其它原因,只能放弃从服务器上获取图片改为本地

人气教程排行