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’ 并没有完全解决问题
相关文章
|
Web App开发 JavaScript Java
浏览器同域名请求的最大并发数限制
  当我们在浏览网页的时候,对浏览速度有一个重要的影响因素,就是浏览器的并发数量。并发数量简单通俗的讲就是,当浏览器网页的时候同时工作的进行数量。   如果同时只有2个并发连接数数量,那网页打开的时候只能依赖于这2条线程,前面如果有打开慢的内容,就会直接影响到后面的内容打开。
7121 0
|
缓存 对象存储 数据安全/隐私保护
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
4262 0
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
|
JSON API 数据格式
5分钟构建API接口服务 | python小知识
Flask是python中轻量的web框架,Flask的两个核心模块除了模板渲染之外就是请求响应处理,其中请求响应处理是由 Werkzeug(WSGI 工具库)完成,而模板渲染是由Jinja(模板渲染库)完成。 Flask因为轻量灵活,用来构建API接口十分合适
11608 10
5分钟构建API接口服务 | python小知识
|
8月前
|
JavaScript 前端开发 算法
前后端全栈技术栈深度剖析:从Vue到Node.js的完整学习路径
三年前端困于API调用?本文系统梳理进阶路径:深入Vue/React原理、掌握Node.js全栈开发、攻克工程化与性能优化,结合实战项目全面提升技术深度,助力突破瓶颈,直通大厂面试核心要求。
|
JavaScript 前端开发 API
Node.js中发起HTTP请求的五种方式
以上五种方式,尽管只是冰山一角,但已经足以让编写Node.js HTTP请求的你,在连接世界的舞台上演奏出华丽的乐章。从原生的 `http`到现代的 `fetch`,每种方式都有独特的风格和表现力,让你的代码随着项目的节奏自由地舞动。
999 65
|
缓存 前端开发 网络协议
性能优化|几个方法让图片加载更快一些
对电商网页的性能而言,图片优化是至关重要的事情,本文就此探讨了一些简单、可靠的图片优化手段。
|
JavaScript 前端开发
JS - 如何上传 Base64 编码的图片
本文展示了如何将Base64编码的图片在前端转换为Blob对象,并使用`FormData`上传到服务器端的方法。
765 0
|
12月前
淘宝图搜接口功能解析
淘宝图搜是基于图像识别的便捷购物工具,支持通过图片查找商品,省去手动输入关键词的麻烦。本文详解其功能、常见问题及解决方法,助你高效使用这一工具。