最近项目中出现canvas载入远程图片报错跨域问题”Access to Image at 'http://xxxxx/004.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.”
后台是PHP,网上搜了很多方法都讲的不是很仔细。
现总结解决办法如下:
1.html文件设置img.crossOrigin = 'anonymous';(注意此语句要在img.src之前)
2.服务器apache设置httpd.conf。首先确保mod_headers模块启用了,默认都是启用。然后假设图片的在htdocs文件夹下面,则在对应图片所在目录的directory标签下面增加 “Header set Access-Control-Allow-Origin "*" ,如下图
3.重启服务器,客户端html清除缓存重新载入页面。