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发现是跨域问题,那就由后端解决

解决方法

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

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


参考

  1. html5中crossorigin属性
  2. canvas toDataURL 跨域问题 设置了crossOrigin = ‘anonymous’ 并没有完全解决问题
相关文章
|
缓存 对象存储 数据安全/隐私保护
阿里云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
3789 0
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
|
Web App开发 编解码 前端开发
webgl canvas系列——快速加背景、抠图、加水印并下载图片
webgl canvas系列——快速加背景、抠图、加水印并下载图片
596 8
webgl canvas系列——快速加背景、抠图、加水印并下载图片
|
JavaScript API
uniapp使用Vue3挂载函数到全局
uniapp使用Vue3挂载函数到全局
1416 0
第7节:Vue3 动态绑定多个属性
第7节:Vue3 动态绑定多个属性
532 0
|
4月前
|
安全
WordPress好用的TinyMCE编辑器插件
果果TinyMCE编辑器基于TinyMCE深度开发,支持高级排版、表格、代码块、图片上传等功能,提升内容创作流畅度与专业性。功能包括兼容TinyMCE所有特性、支持文章与页面编辑、自定义配置、安全图片上传及媒体库支持。仅替换后台编辑器,不影响前台及其他页面。
195 0
|
前端开发 JavaScript
使用 try-catch 语句来捕获 Promise 中的异常
【10月更文挑战第26天】使用try-catch语句捕获Promise中的异常是一种非常实用的技术,能够使异步代码的错误处理更加清晰、可控,提高程序的可靠性和稳定性。在实际开发中,合理地运用try-catch语句以及其他相关的错误处理机制,可以有效地应对各种可能出现的异常情况,为用户提供更好的体验。
|
JSON 算法 Java
hutool工具的简单使用
这篇文章介绍了Hutool工具库的基本使用,通过代码示例展示了如何利用Hutool进行字符串处理、文件操作、集合操作、加密解密、日期时间处理、网络请求和读取资源文件等常见任务。
515 0
hutool工具的简单使用
|
JSON 前端开发 JavaScript
【Layui】掌握的LayUI树形权限菜单,助力你的权限管理!
LayUI是一款基于jQuery的前端UI框架,而树形权限菜单是一种常见的网页导航菜单设计。LayUI树形权限菜单结合了LayUI框架的特性和树状结构的展示方式,用于实现对用户权限的管理和控制。树形权限菜单通常由多层级的树状菜单构成,每个节点表示一个功能或者页面,父节点表示上级菜单,子节点表示下级菜单。通过这种层级结构,可以清晰地展示网站或系统的功能模块之间的关系。权限管理是指根据用户的角色或权限级别对不同的用户展示不同的菜单选项。
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定,包括在Vue 2中使用`value`和`input`事件,以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
991 22
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
699 7