搞定阿里云oss图片请求跨域

阿里云oss图片请求跨域解决方案

在一次实现图片下载的方案中使用了axios来实现图片下载(vue实现图片下载)，实现过程中引用了百度图片的地址和阿里云oss上图片的地址，发现在请求阿里云oss上的图片会出现跨域报错，于是上网百度了一下，具体原因是：当 OSS 收到一个跨域请求（或者 OPTIONS 请求）时，会读取存储空间对应的 CORS 规则，然后进行相应的权限检查。OSS 会依次检查每一条规则，使用第一条匹配的规则来允许请求并返回对应的 header。如果所有规则都匹配失败，则不附加任何 CORS 相关的 header。

所以我们想要oss上的图片不出现这种情况则需要设置对应的跨域规则

设置跨域规则

• 1.登录阿里云控制台，找到oss对象存储面板

• 2.找到对应的储存空间对象

  

• 3.点击权限管理，找到跨域设置，点击设置

  

• 4.点击创建规则，根据项目情况设置相应的权限

  

像我这个无关紧要的项目中，设置来源为*，请求方式为get，允许headers为*，意思就是都可以访问

• 5.刷新页面，再次点击下载就不会出现跨域的报错了