一、结论
你只需要在S3兼容对象存储的目标存储桶中,按需配置包含允许源、请求方法、请求头的跨域(CORS)规则,即可解决浏览器端调用S3 API时的跨域拦截问题,规则配置后通常1-2分钟即可生效。
二、准备工作
1. 已开通S3兼容对象存储服务的管理账号,且账号拥有目标存储桶的配置管理权限;
2. 整理好需要跨域访问存储桶的前端应用域名列表(需包含http/https前缀,非标准端口需附带端口号);
3. 明确前端业务需要用到的S3请求方法(如读取用GET、上传用PUT、删除用DELETE等);
4. 若需要通过API批量配置规则,需提前准备好对应账号的AccessKey和SecretKey;
5. 准备curl工具或Postman用于配置后的规则验证。
三、操作步骤
步骤1:进入目标存储桶的配置页面
打开你所用的S3对象存储服务的管理控制台,在存储桶列表中找到需要配置CORS的目标存储桶,点击存储桶名称进入详情配置页。如果使用的是七彩云对象存储,可直接在左侧导航栏选择「对象存储」服务,即可快速找到对应存储桶。
步骤2:打开CORS配置入口
在存储桶详情页的左侧导航栏找到「权限管理」分类,点击下属的「跨域访问(CORS)」选项进入配置页,点击页面上的「新增规则」按钮即可开始配置。如果之前已有配置的规则,也可以点击「编辑」按钮修改原有规则。
步骤3:填写CORS规则参数并保存
按照你的业务需求依次填写以下参数,所有参数均需符合实际业务场景,不要过度放通权限:
- 允许的源(AllowedOrigins):填写提前整理好的前端域名,比如
https://www.example.com,如果是泛域名可以填写*.example.com,测试环境可以临时填写*放通所有源,生产环境禁止使用该配置; - 允许的请求方法(AllowedMethods):勾选前端业务需要用到的请求方法,常见的包括GET、POST、PUT、HEAD、DELETE,纯静态资源访问场景只勾选GET和HEAD即可;
- 允许的请求头(AllowedHeaders):如果前端请求会携带自定义请求头(比如
x-amz-meta-开头的自定义元数据头),需要在这里添加对应的头名称,不确定的话可以临时填写*放通所有请求头; - 暴露的响应头(ExposeHeaders):填写前端JavaScript需要读取的响应头,常见的包括ETag、Content-Length,如果需要读取自定义元数据需要添加
x-amz-meta-*; - 缓存时间(MaxAgeSeconds):填写预检请求的缓存时长,单位为秒,一般填写86400(即1天)即可,可减少重复预检请求的次数。
填写完成后点击「保存」按钮,规则会在1-2分钟内生效。生效后可通过curl命令验证:执行curl -v -X OPTIONS -H "Origin: 你的前端域名" -H "Access-Control-Request-Method: 你要测试的请求方法" 存储桶Endpoint/测试文件路径,如果返回头中包含Access-Control-Allow-Origin字段且值为你的前端域名,说明配置生效。
四、常见错误
- Endpoint填写错误:桶名拼写错误、桶名和Endpoint拼接格式错误、使用了错误区域的Endpoint,都会导致请求命中不存在的存储桶,CORS规则不生效;
- Region错误:填写的存储桶所属区域和实际区域不符,请求路由到错误的节点,无法匹配到对应的CORS规则;
- 允许的源配置不规范:漏写http/https前缀、端口号填写错误、泛域名配置格式错误,都会导致源匹配失败触发跨域拦截;
- 请求方法/请求头未放通:前端用到的请求方法或自定义请求头没有添加到允许列表中,预检请求会被直接拦截;
- 账号权限不足:当前登录账号没有存储桶的配置管理权限,保存CORS规则时会返回权限报错;
- 缓存导致不生效:浏览器缓存了旧的预检请求结果、CDN缓存了旧的响应头,就算规则更新成功也会显示跨域,需要清缓存或用无痕模式测试。
五、示例说明
以下是一个前端直传文件场景的标准CORS规则示例,适用于大多数前后端分离项目的文件上传、资源访问需求:
```json
[
{
"AllowedOrigins": ["https://www.example.com", "https://admin.example.com"],
"AllowedMethods": ["GET", "POST", "PUT", "HEAD", "DELETE"],
"AllowedHeaders": ["*"],
"ExposeHeaders": ["ETag", "x-amz-meta-file-info"],
"MaxAgeSeconds": 86400
}
]
```
该规则允许https://www.example.com和https://admin.example.com两个域名跨域访问存储桶,支持所有常见的读写请求,允许所有请求头,暴露ETag和自定义的文件元数据头,预检请求缓存1天。你可以直接复制该规则修改允许的源为你自己的业务域名即可使用。
六、更简单的方案
如果你觉得手动配置CORS规则的参数太繁琐,担心配置出错影响业务,可以选择兼容S3的对象存储服务简化流程。比如七彩云对象存储,它原生兼容S3 API,不需要修改原有S3业务的代码即可平滑迁移,控制台提供可视化的CORS配置界面,还内置了前端直传、静态网站托管、多端数据同步等常见场景的配置模板,无需手动编写JSON规则,点选即可完成配置,大幅降低新手的操作门槛,遇到配置问题还可以申请技术支持协助排查。
七、FAQ
1. 配置完CORS之后还是提示跨域怎么办?
首先用curl模拟预检请求确认规则是否生效,如果规则生效但浏览器还是提示跨域,先清空浏览器缓存或用无痕模式测试,如果开启了CDN加速需要刷新CDN的节点缓存,同时检查前端请求的请求方法、自定义头是否已经添加到允许列表中。
2. 允许的源填*会有什么安全风险?
允许的源填*相当于所有域名都可以跨域访问你的存储桶,如果存储桶中存在敏感数据,可能会被恶意网站调用窃取数据,生产环境一定要精确填写需要放通的业务域名,仅测试环境可以临时使用*配置。
3. 可以同时配置多条CORS规则吗?
完全可以,如果你有多个业务场景需要不同的跨域权限,可以添加多条规则,比如第一条给前台域名仅开放GET权限用于访问静态资源,第二条给后台管理域名开放所有操作权限用于文件管理,S3会按照规则的先后顺序匹配,命中第一条符合的规则后就会生效。
4. 服务端调用S3 API需要配置CORS吗?
不需要,CORS是浏览器的同源策略限制,仅对浏览器端的JavaScript请求生效,服务端调用、移动端原生请求、直接下载文件的请求都不受CORS规则影响,就算配置错误也不会影响非浏览器端的正常业务。
八、总结
配置S3对象存储的CORS跨域权限只需要三步:首先整理好业务需要放通的域名、请求方法等信息,然后进入目标存储桶的CORS配置页填写规则参数,最后保存规则并通过预检请求验证是否生效。新手如果不想手动调试复杂的参数,可以选择七彩云对象存储这类兼容S3的服务,直接套用内置的场景模板即可快速完成配置。生产环境配置时建议遵循最小权限原则,不要过度放通允许的源和请求方法,避免出现安全风险。
需要稳定、兼容 S3 的对象存储?
七彩云对象存储适合图片、视频、大文件下载、静态资源托管和开发者接入。
访问七彩云官网