阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy

本文涉及的产品
对象存储 OSS,OSS 加速器 50 GB 1个月
简介: 阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy

问题描述

<!-- 使用img标签没有问题-->
<img src="url">
<script>
// 使用js Image 对象报错
let image = new Image()
image.setAttribute('crossOrigin', 'Anonymous')
image.src = url
</script>

报错

Access to image at xxx
from origin xxx
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决:

阿里云OSS权限控制/跨域访问中 设置跨域规则:

来源: *
允许 Methods: GET POST PUT DELETE HEAD
允许 Headers:*
暴露 Headers:ETag、 x-oss-request-id、x-oss-version-id
缓存时间(秒):0

1、方式一:

浏览器设置:停用缓存

image.png

2、方式二:

添加元数据

// 简单上传
result = await client.put(filename, file, {
   meta: {
     'Cache-Control': 'no-cache',
   },
 })

参考

解决阿里云oss 图片跨域问题

管理文件元信息


相关实践学习
对象存储OSS快速上手——如何使用ossbrowser
本实验是对象存储OSS入门级实验。通过本实验,用户可学会如何用对象OSS的插件,进行简单的数据存、查、删等操作。
相关文章
|
10月前
|
存储 缓存 网络协议
如何使用CDN加速访问OSS存储的图片资源?
通过阿里云CDN加速OSS上的图片和视频资源,可显著提升访问速度、降低带宽成本。CDN将静态资源缓存至离用户最近的节点,减少加载时间,并提供图像处理、缓存优化等功能,提升用户体验。同时,CDN还支持访问数据分析,助力运营决策。本文详解如何通过CDN控制台配置OSS加速,包括添加域名、设置CNAME、配置缓存策略等步骤,帮助您快速实现资源加速。
|
存储 人工智能 Kubernetes
AI 场景深度优化!K8s 集群 OSSFS 2.0 存储卷全面升级,高效访问 OSS 数据
阿里云对象存储OSS是一款海量、安全、低成本、高可靠的云存储服务,是用户在云上存储的高性价比选择…
|
存储 Kubernetes 对象存储
StrmVol存储卷:如何解锁K8s对象存储海量小文件访问性能新高度?
如何提升海量文件的数据读取速率,对于AI训练集管理、量化回测、时序日志分析等场景尤为重要。阿里云容器服务(ACK))支持StrmVol类型存储卷,基于底层虚拟块设备及内核态文件系统,显著降低海量小文件访问延迟。
|
存储 Kubernetes 对象存储
StrmVol 存储卷:解锁 K8s 对象存储海量小文件访问性能新高度
本文介绍了阿里云容器服务(ACK)支持的StrmVol存储卷方案,旨在解决Kubernetes环境中海量小文件访问性能瓶颈问题。通过虚拟块设备与内核态文件系统(如EROFS)结合,StrmVol显著降低了小文件访问延迟,适用于AI训练集加载、时序日志分析等场景。其核心优化包括内存预取加速、减少I/O等待、内核态直接读取避免用户态切换开销,以及轻量索引快速初始化。示例中展示了基于Argo Workflows的工作流任务,模拟分布式图像数据集加载,测试结果显示平均处理时间为21秒。StrmVol适合只读场景且OSS端数据无需频繁更新的情况,详细使用方法可参考官方文档。
2215 145
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
9289 90
|
存储 人工智能 测试技术
AI 场景深度优化!K8s 集群 OSSFS 2.0 存储卷全面升级,高效访问 OSS 数据
OSSFS 2.0通过轻量化协议设计、协程化技术及FUSE3低级API重构,实现大文件顺序读写与小文件高并发加载的显著提升,在实际测试中表现出高达数十倍的吞吐量增长。适用于机器学习训练、推理等对高带宽低延迟要求严苛的场景,同时支持静态和动态挂载方式,方便用户在ACK集群中部署使用。
1573 34
|
存储 应用服务中间件 开发工具
对象存储OSS-Python设置代理访问请求
通过 Python SDK 配置 nginx 代理地址请求阿里云 OSS 存储桶服务。示例代码展示了如何使用 RAM 账号进行身份验证,并通过代理下载指定对象到本地文件。
719 15
|
存储 人工智能 缓存
AI助理直击要害,从繁复中提炼精华——使用CDN加速访问OSS存储的图片
本案例介绍如何利用AI助理快速实现OSS存储的图片接入CDN,以加速图片访问。通过AI助理提炼关键操作步骤,避免在复杂文档中寻找解决方案。主要步骤包括开通CDN、添加加速域名、配置CNAME等。实测显示,接入CDN后图片加载时间显著缩短,验证了加速效果。此方法大幅提高了操作效率,降低了学习成本。
6186 16
|
存储 网络安全 对象存储
缺乏中间证书导致通过HTTPS协议访问OSS异常
【10月更文挑战第4天】缺乏中间证书导致通过HTTPS协议访问OSS异常
1359 4
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
335 1