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

问题描述：

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

可以正常访问
<img src="http://www.demo.com/uploads/demo.png">

不能正常访问
<img src="http://www.demo.com/uploads/demo.png" crossOrigin='anonymous'>

  

 

  
1
  
2
  
3
  
4
  
5
 

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

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

解决方法

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

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

  

 

  
1
  
2
  
3
  
4
  
5
 

参考

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

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/104432495