img添加属性crossOrigin='anonymous'图片无法访问

问题描述：

子域名m.demo.com 需要访问www.demo.com 下的图片，代码如下

可以正常访问


不能正常访问

经过测试之后，发现加了 crossOrigin='anonymous' 属性的不能正常访问，

打开浏览器console发现是跨域问题，那就由后端解决

解决方法

在资源文件服务器www.demo.com ，修改Nginx配置

location ^~ /uploads/ {
  alias /www/wwwroot/demo.com/uploads/;
  # 开启允许跨域访问
  add_header 'Access-Control-Allow-Origin' '*';
}

参考

1. html5中crossorigin属性
2. canvas toDataURL 跨域问题 设置了crossOrigin = ‘anonymous’ 并没有完全解决问题