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’ 并没有完全解决问题
相关文章
|
缓存 对象存储 数据安全/隐私保护
阿里云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
4343 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接口十分合适
11702 10
5分钟构建API接口服务 | python小知识
|
消息中间件 缓存 监控
Sentry 开发人员文档(中文手册,二次开发指南)
Sentry 开发人员文档(中文手册,二次开发指南)
4192 0
Sentry 开发人员文档(中文手册,二次开发指南)
|
JavaScript 前端开发 API
Node.js中发起HTTP请求的五种方式
以上五种方式,尽管只是冰山一角,但已经足以让编写Node.js HTTP请求的你,在连接世界的舞台上演奏出华丽的乐章。从原生的 `http`到现代的 `fetch`,每种方式都有独特的风格和表现力,让你的代码随着项目的节奏自由地舞动。
1080 65
|
人工智能 开发框架 安全
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
Smolagents 是 Hugging Face 推出的轻量级开源库,旨在简化智能代理的构建过程,支持多种大语言模型集成和代码执行代理功能。
1285 69
Smolagents:三行代码就能开发 AI 智能体,Hugging Face 开源轻量级 Agent 构建库
|
中间件 PHP
在ThinkPHP框架中解决跨域问题的三种方法
以上就是在ThinkPHP框架中解决跨域问题的三种方法。希望这些方法能帮助你解决你的问题。
1027 11
淘宝图搜接口功能解析
淘宝图搜是基于图像识别的便捷购物工具,支持通过图片查找商品,省去手动输入关键词的麻烦。本文详解其功能、常见问题及解决方法,助你高效使用这一工具。
|
关系型数据库 MySQL
MYSQL 高级文本查询之regexp_like和REGEXP
在MySQL中,regexp_like和REGEXP都是用于执行正则表达式搜索的函数。虽然它们都可以完成相似的任务,但它们之间还是有一些区别的。在本篇博客中,我们将比较这两个函数的用法和示例,并解释它们之间的差异。
|
监控 JavaScript 前端开发
Vue 3+Sentry,轻松实现错误追踪!
Vue 3+Sentry,轻松实现错误追踪!

热门文章

最新文章