Heim >Backend-Entwicklung >PHP-Tutorial >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:461229Durchsuche

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn