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’ 并没有完全解决问题
相关文章
|
运维 监控 前端开发
前端监控究竟有多重要
前端监控究竟有多重要
527 0
|
5月前
|
JavaScript 前端开发 算法
前后端全栈技术栈深度剖析:从Vue到Node.js的完整学习路径
三年前端困于API调用?本文系统梳理进阶路径:深入Vue/React原理、掌握Node.js全栈开发、攻克工程化与性能优化,结合实战项目全面提升技术深度,助力突破瓶颈,直通大厂面试核心要求。
|
10月前
|
JavaScript 前端开发 API
Node.js中发起HTTP请求的五种方式
以上五种方式,尽管只是冰山一角,但已经足以让编写Node.js HTTP请求的你,在连接世界的舞台上演奏出华丽的乐章。从原生的 `http`到现代的 `fetch`,每种方式都有独特的风格和表现力,让你的代码随着项目的节奏自由地舞动。
857 65
|
9月前
淘宝图搜接口功能解析
淘宝图搜是基于图像识别的便捷购物工具,支持通过图片查找商品,省去手动输入关键词的麻烦。本文详解其功能、常见问题及解决方法,助你高效使用这一工具。
|
人工智能 开发框架 安全
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
Smolagents 是 Hugging Face 推出的轻量级开源库,旨在简化智能代理的构建过程,支持多种大语言模型集成和代码执行代理功能。
1028 69
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
|
12月前
|
中间件 PHP
在ThinkPHP框架中解决跨域问题的三种方法
以上就是在ThinkPHP框架中解决跨域问题的三种方法。希望这些方法能帮助你解决你的问题。
804 11
|
网络协议 Unix 应用服务中间件
|
JavaScript 前端开发
JS - 如何上传 Base64 编码的图片
本文展示了如何将Base64编码的图片在前端转换为Blob对象,并使用`FormData`上传到服务器端的方法。
698 0
|
JavaScript 数据处理
Vuex 的Mutation 和 Action 有什么区别?
【10月更文挑战第15天】Mutation 和 Action 在 Vuex 中都有着重要的作用,它们相互协作,共同实现了 Vuex 状态管理的功能。理解它们的区别与联系,并在实际应用中正确使用,对于构建高效、可靠的 Vue 应用具有重要意义。
|
前端开发 JavaScript 索引
CSS+JS实现轮播图
CSS+JS实现轮播图
415 0

热门文章

最新文章