阿里云OSS，打开图片地址无法预览，返回的cors报错

问题：

生产环境-某项目，在点击某图片链接时，弹出一个白板，图片不显示，无法预览

错误提示：

如图

报错信息：

Access to fetch at ‘https://bucket-fesco-settle.oss-cn-beijing.aliyuncs.com/fesco/settle/FESCO%E4%B8%A82020%E5%B9%B4%E5%BA%A6%E4%B8%AA%E4%BA%BA%E6%89%80%E5%BE%97%E7%A8%8E%E7%BB%BC%E5%90%88%E6%89%80%E5%BE%97%E6%B1%87%E7%AE%97%E6%B8%85%E7%BC%B4App%E7%AB%AF%E6%93%8D%E4%BD%9C%E6%B5%81%E7%A8%8B%E8%BE%85%E5%AF%BC%E6%89%8B%E5%86%8C7e61a848-e96b-4f9f-bd10-927b8d3d0a6f?Expires=2563348029&OSSAccessKeyId=LTAI4GCf7cGAZrzLxLr6Wqgp&Signature=5DJmPte4vibryCH6eMZ3Wntle0Y%3D’ from origin ‘https://settle.fesco.com.cn’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

• 为cors跨域的问题
• Access-Control-Allow-Origin，标识允许哪个域的请求
• 在阿里云OSS Bucket，指定一下，可允许访问的域名
• origin来源设置为* 可以是具体的域名或者*表示所有域。

原因：

项目在阿里云OSS Bucket里，没有配置跨域访问规则，导致在浏览器请求时，返回cors报错

解决方案：

运维在 阿里云OSS Bucket里面配置

操作步骤

• 登录OSS管理控制台。
• 单击Bucket列表，之后单击目标Bucket名称。
• 单击权限管理 > 跨域设置，在跨域设置区域单击设置。
• 单击创建规则，在设定跨域规则面板设置跨域访问参数。

如图：

配置项

CORS的配置方法一般是针对每个访问来源单独配置规则，勿将多个来源加到一个规则，多个规则之间不要有覆盖冲突。其它的选项只开放需要的权限即可。CORS配置有以下几项：

• 来源：允许跨域请求的来源，可以同时指定多个来源。配置时需带上完整的域信息，例如：http://10.X.X.100:8001或https://www.aliyun.com。
  注意，不要遗漏了协议名http或https，如果端口不是默认的80，还需要带上端口。如果不能确定域名，可以打开浏览器的调试功能，查看Header中的Origin。域名支持通配符，每个域名中允许最多使用一个，例如https://*.aliyun.com。 如果来源指定为 * ，则表示允许所有来源的跨域请求。
• 允许 Methods：按照需求开通对应的方法即可，调试时可以全部选择。
• 允许 Headers：允许的跨域请求Header。允许配置多条匹配规则，以回车间隔。在Access-Control-Request-Headers中指定的每个Header，都必须在Allowed Header中有对应项。Header容易遗漏，没有特殊需求的情况下，建议设置为*，表示允许所有，大小写不敏感。
• 暴露 Headers：暴露给浏览器的Header列表，即用户从应用程序中访问的响应头，例如一个Javascript的XMLHttpRequest对象。不允许使用通配符。具体的配置需要根据应用的需求确定，只暴露需要使用的Header。如果不需要暴露可以不填。大小写不敏感。该项是可选配置项。
• 缓存时间（秒）：浏览器对特定资源的预取请求（OPTIONS请求）返回结果的缓存时间，单位为秒。如果没有特殊情况可以稍大一点，比如60秒。该项是可选配置项。