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’ 并没有完全解决问题
相关文章
element-el-time-picker 开始时间-结束时间-回显(整理)
element-el-time-picker 开始时间-结束时间-回显(整理)
|
8月前
|
JavaScript 前端开发 API
Node.js中发起HTTP请求的五种方式
以上五种方式,尽管只是冰山一角,但已经足以让编写Node.js HTTP请求的你,在连接世界的舞台上演奏出华丽的乐章。从原生的 `http`到现代的 `fetch`,每种方式都有独特的风格和表现力,让你的代码随着项目的节奏自由地舞动。
771 65
|
7月前
淘宝图搜接口功能解析
淘宝图搜是基于图像识别的便捷购物工具,支持通过图片查找商品,省去手动输入关键词的麻烦。本文详解其功能、常见问题及解决方法,助你高效使用这一工具。
|
10月前
|
中间件 PHP
在ThinkPHP框架中解决跨域问题的三种方法
以上就是在ThinkPHP框架中解决跨域问题的三种方法。希望这些方法能帮助你解决你的问题。
719 11
|
12月前
|
网络协议 Unix 应用服务中间件
|
开发者 容器
Echarts饼图实现-今日进度-动态图
构建一个动态旋转的ECharts饼图,包括渐变色和动画效果。初始化ECharts实例,设置图表尺寸和背景,配置标题、颜色、系列数据及自定义渲染。利用`renderItem`绘制弧线和圆点,`getCirlPoint`计算坐标。通过`setInterval`和`draw`函数实现旋转动画。完整代码可在链接下载。
1181 0
Echarts饼图实现-今日进度-动态图
|
前端开发 JavaScript 索引
CSS+JS实现轮播图
CSS+JS实现轮播图
398 0
|
存储 Cloud Native Java
Anolis安装Jdk保姆级教学
Anolis安装Jdk保姆级教学
624 0
|
安全 JavaScript 前端开发
若依实现单点登录(解析请求链接中的参数做鉴权认证)
若依实现单点登录(解析请求链接中的参数做鉴权认证)
|
JavaScript 前端开发
3种JavaScript 对象转数组的方法
3种JavaScript 对象转数组的方法
514 0