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 开始时间-结束时间-回显(整理)
|
存储 弹性计算 网络安全
|
6月前
|
JavaScript 前端开发 API
Node.js中发起HTTP请求的五种方式
以上五种方式,尽管只是冰山一角,但已经足以让编写Node.js HTTP请求的你,在连接世界的舞台上演奏出华丽的乐章。从原生的 `http`到现代的 `fetch`,每种方式都有独特的风格和表现力,让你的代码随着项目的节奏自由地舞动。
665 65
|
Rust 前端开发 JavaScript
前端技术新探索:从React到WebAssembly的高效之路
前端技术新探索:从React到WebAssembly的高效之路
423 2
|
5月前
淘宝图搜接口功能解析
淘宝图搜是基于图像识别的便捷购物工具,支持通过图片查找商品,省去手动输入关键词的麻烦。本文详解其功能、常见问题及解决方法,助你高效使用这一工具。
|
8月前
|
中间件 PHP
在ThinkPHP框架中解决跨域问题的三种方法
以上就是在ThinkPHP框架中解决跨域问题的三种方法。希望这些方法能帮助你解决你的问题。
602 11
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
538 0
|
开发框架 .NET C#
C#学习相关系列之Linq用法---where和select用法(二)
C#学习相关系列之Linq用法---where和select用法(二)
1045 2
|
安全 关系型数据库 MySQL
【PHP开发专栏】PHP PDO与MySQLi操作数据库
【4月更文挑战第30天】PHP数据库交互的核心是PDO和MySQLi。PDO提供数据访问抽象层,支持多种数据库,强调安全和灵活性;MySQLi则专为MySQL设计,有面向对象和过程化接口。两者都支持预处理语句,防止SQL注入。选择取决于项目需求,如可移植性、特定功能和API偏好。了解其使用有助于编写安全高效的代码。
305 2
|
存储 Cloud Native Java
Anolis安装Jdk保姆级教学
Anolis安装Jdk保姆级教学
561 0