Maison >développement back-end >tutoriel php >javascript - canvas的图片来源于api.xx.com,当前的域是m.xx.com,调用canvas.toDataURL(),就报跨域

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

WBOY
WBOYoriginal
2016-07-06 13:52:461229parcourir

一个项目使用了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这东东是后台发送过来的
之前我也遇过这种问题,但没这样处理,因为一些其它原因,只能放弃从服务器上获取图片改为本地

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn