OSS跨域问题，浏览器报CORS错误
前端通过JavaScript请求OSS资源时，浏览器控制台报 Access-Control-Allow-Origin 错误。这是浏览器的同源策略限制，需要在OSS端配置CORS规则。本文提供详细的解决方案。
错误表现
浏览器控制台报错：Access to XMLHttpRequest at 'https://bucket.oss-cn-hangzhou.aliyuncs.com/file' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决步骤
登录OSS控制台 → 选择Bucket → 权限管理 → 跨域设置 → 创建规则：
- 来源：
https://www.example.com（你的网站域名，不要用 * ） - 允许Methods：根据实际需要勾选GET、PUT、POST、HEAD
- 允许Headers：
* - 暴露Headers：
ETag, x-oss-request-id - 缓存时间：3600
CDN场景的特殊处理
如果OSS前面有CDN，CDN可能缓存了不带CORS头的响应。解决方案：在CDN控制台配置"Vary: Origin"响应头，让CDN根据不同Origin分别缓存。或者在CDN的回源配置中开启"跟随请求头"。
调试技巧
用Chrome DevTools的Network面板查看请求的Response Headers，确认是否包含 Access-Control-Allow-Origin。用 curl -v -H "Origin: https://www.example.com" https://bucket.oss-cn-hangzhou.aliyuncs.com/file 直接在命令行测试CORS响应。