阿里云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 =</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、方式一：

浏览器设置：​​停用缓存​​

2、方式二：

添加元数据

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

参考
​解决阿里云oss 图片跨域问题​​管理文件元信息​​