OSS 访问图片资源报“No ‘Access-Control-Allow-Origin‘”的错误

今天药忘吃喽~ 2022-09-16 01:28 180阅读 0赞

## 问题描述 ##

为了实现跨域访问，保证跨域数据传输的安全进行，在OSS控制台设置了跨域CORS规则后，通过SDK进行程序调用时报以下错误。

No 'Access-Control-Allow-Origin' header is present on the requested resource

## 问题原因 ##

出现跨域问题的原因如下：

*  跨域CORS规则设置异常  
    未正确设置CORS规则。
 *  浏览器缓存  
    设置了CORS跨域规则，但是存在浏览器缓存，导致读取了缓存中未含有跨域头的Response Header。

## 解决方案 ##

不同的问题原因对应的解决方法不同，建议先清除浏览器缓存进行测试。如果仍然报错，请参见以下步骤排查CORS跨域规则是否设置正确：

1.  登录[OSS管理控制台][OSS]。
2.  单击**Bucket列表**，单击目标Bucket，进入Bucket概览页面。
3.  在左侧导航栏中选择**权限管理**>**跨域设置**，然后单击**设置**。
    
    ![ed8bf04aae210bdbf96c8133adc21737.png][]
4.  将**来源**设置为`*`，**允许Methods**全部勾选，**允许Headers**设置为`*`，**暴露Headers**设置为**Etag**和**x-oss-request-id**，缓存时间设置为0，选中**返回Vary: Origin**。关于如何设置跨域规则，请参见[设置跨域访问][Link 1]。
    
    > **注意**：选中 `返回Vary: Origin`以避免本地缓存错乱，可能会造成浏览器访问次数或者CDN回源次数增加。
    
    ![deb3021000376324609c0cb6cf4fa3b8.png][]

到此问题解决。

[OSS]: https://oss.console.aliyun.com/
[ed8bf04aae210bdbf96c8133adc21737.png]: /images/20220828/4b0ae7a4da49462583f7703ce02d1695.png
[Link 1]: https://help.aliyun.com/document_detail/31903.htm
[deb3021000376324609c0cb6cf4fa3b8.png]: /images/20220828/34810b0301a44ea5960570c11520fb65.png