OSS跨域资源共享CORS配置详解
在前端开发中，从A域名的网页通过JavaScript请求B域名的OSS资源时，浏览器会报CORS错误。这是浏览器的同源策略限制，需要在OSS端配置CORS规则来解决。本文详细讲解CORS的原理和OSS的配置方法。
什么是CORS
CORS（Cross-Origin Resource Sharing）是一种机制，允许服务器声明哪些源站有权限访问其资源。当网页的JavaScript发起跨域HTTP请求时（如fetch、XMLHttpRequest），浏览器会先发一个OPTIONS预检请求，服务器响应中包含CORS头信息，浏览器据此决定是否允许实际请求。
OSS CORS配置步骤
登录OSS控制台 → 选择Bucket → 权限管理 → 跨域设置 → 创建规则：
- 来源（AllowedOrigin）：填写允许访问的域名，如
https://www.example.com。生产环境不要用*，避免被恶意网站盗用。 - 允许Methods：勾选GET（下载）、PUT（上传）、POST（表单上传）、HEAD（获取元数据）。根据实际需要选择。
- 允许Headers：填写
*或具体的自定义Header名称（如x-oss-meta-author）。 - 暴露Headers（ExposeHeader）：允许JavaScript读取的响应头。如
ETag、x-oss-request-id。 - 缓存时间（MaxAgeSeconds）：预检请求的缓存时间，建议设置3600秒（1小时），减少OPTIONS请求次数。
常见错误排查
错误1：Access-Control-Allow-Origin不匹配。检查来源是否包含当前域名，注意区分http和https。
错误2：PUT/POST上传报CORS错误。检查是否允许了对应的Method，以及AllowedHeaders是否包含Content-Type。
错误3：CDN场景下CORS失效。CDN可能缓存了不带CORS头的响应。配置CDN的"Vary: Origin"头，让CDN根据不同Origin分别缓存。