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

简介: 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'>

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

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

解决方法

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

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

参考

  1. html5中crossorigin属性
  2. canvas toDataURL 跨域问题 设置了crossOrigin = ‘anonymous’ 并没有完全解决问题
相关文章
|
3月前
|
JavaScript 前端开发
详尽分享解决img的src属性为空时会有边框的情况
详尽分享解决img的src属性为空时会有边框的情况
125 0
|
10月前
|
前端开发
input file上传文件改变默认样式
input file上传文件改变默认样式
75 0
|
移动开发 HTML5
修改HTML5 input placeholder 颜色及修改失效的解决办法
修改HTML5 input placeholder 颜色及修改失效的解决办法
|
前端开发
ajax 通过move_uploaded_file函数上传图片获取$_FILES['file']对象的属性内容
ajax 通过move_uploaded_file函数上传图片获取$_FILES['file']对象的属性内容
47 0
|
编解码 前端开发 JavaScript
img标签中的srcset属性有什么用?
img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 也就是说,我们不需要使用JavaScript也可以实现分辨率自适应。
370 0
|
JavaScript
Element UI - el-image 图片初始化加载爬坑
Element UI - el-image 图片初始化加载爬坑
2375 0
Element UI - el-image 图片初始化加载爬坑
|
移动开发 前端开发 应用服务中间件
img添加属性crossOrigin='anonymous'图片无法访问
img添加属性crossOrigin='anonymous'图片无法访问
1072 0
HTML 修改img标签的src属性
$("#imgId").attr('src',path); 
1229 0