3 份 JSON 搞定 S3 CORS 配置AWS S3 跨域实战完整指南【免费下载链接】aws-devops-zero-to-heroAWS zero to hero repo for devops engineers to learn AWS in 30 Days. This repo includes projects, presentations, interview questions and real time examples.项目地址: https://gitcode.com/GitHub_Trending/aw/aws-devops-zero-to-hero昨晚线上翻车商品页图片全裂F12 里闪着一行blocked by CORS policy排查两小时才定位到——图片桶没配 S3 CORS 规则。基于 aws-devops-zero-to-hero 项目的踩坑经验这里按 3 个真实场景直接给可复制的 JSON、控制台与 CLI 操作路径下次跨域问题照抄就能收工。先看懂门卫机制跨域到底在查什么 浏览器加载别家域名的资源就像访客进写字楼没登记就放行等于失窃。GET/HEAD 这类简单请求相当于刷门禁卡直进只要 S3 提前登记了对应来源即可放行。PUT、DELETE 这类复杂请求会先发一个 OPTIONS 预检请求相当于提前递申请门卫点头后才真正动手。所以 S3 上的 CORS 配置本质就是这张访客登记表登记哪些来源Origin、哪些方法Methods、哪些请求头Headers被允许浏览器自动比对匹配不上就拦截。按场景挑一份 S3 CORS JSON场景 1纯静态图片桶页面只读图{ CORSRules: [ { AllowedHeaders: [*], AllowedMethods: [GET, HEAD], AllowedOrigins: [https://shop.example.com], ExposeHeaders: [ETag], MaxAge: 3600 } ] }图片只读方法只开 GET 和 HEAD 就够了。来源写完整域名含 httpsExposeHeaders里加ETag方便前端做缓存判断。场景 2静态站 CDN 分发{ CORSRules: [ { AllowedHeaders: [*], AllowedMethods: [GET], AllowedOrigins: [https://www.example.com, https://example.com], MaxAge: 86400 } ] }桶上只放行自家域名读操作保持最小授权。注意浏览器走 CDN 时CloudFront 行为层若不透传响应头源站规则也白搭——两层规则保持一致参考 day-19/README.md 里 CloudFront 的配置讲法。场景 3后台可上传PUT/DELETE{ CORSRules: [ { AllowedHeaders: [Content-Type, Authorization, x-amz-acl], AllowedMethods: [PUT, GET, DELETE], AllowedOrigins: [https://admin.example.com], ExposeHeaders: [ETag, Content-Length], MaxAge: 3600 } ] }上传是复杂请求浏览器必发 OPTIONS 预检所以AllowedMethods里必须有 PUT。用预签名 URL 上传的话请求头记得把x-amz-acl、x-amz-meta-*一并登记。两种改配方式控制台点 4 步S3 控制台选中目标桶切到权限标签页找到跨域资源共享 (CORS)点编辑粘贴上面场景对应的 JSON保存CLI 一条命令aws s3api put-bucket-cors \ --bucket shop-assets \ --cors-configuration file://cors.json改完可以用aws s3api get-bucket-cors --bucket shop-assets回读一遍确认生效。报错速查对症状开药方 ⚡现象可能原因处置动作403 Forbidden 控制台提示 CORS 策略拦截请求来源不在AllowedOrigins或方法不在AllowedMethods比对请求实际 Origin 与方法补齐缺失项预检OPTIONS直接 403桶上没有匹配规则或桶策略把匿名请求拒了补预检涉及的方法与头检查桶策略是否放行写法可对照 day-9/demos/bucket-policies/restrict-access-to-owner.json改完配置仍不生效浏览器缓存了旧预检结果MaxAge有效期内不重发CtrlShiftR 强刷确认改的是浏览器访问的那个桶预检通过、实际请求仍失败JS 读不到响应头缺ExposeHeaders把需要读取的响应头名加进ExposeHeaders再发版生产避坑清单 ️最小授权生产桶不写*域名、方法、请求头按需逐个登记cors.json进仓库做版本管理改配留痕可回滚前置 CloudFront 时在行为设置里同步配 CORS两层一致才稳用 CloudWatch 盯 403 与跨域请求量异常曲线出现时再排查不迟发布新规则前先get-bucket-cors看一眼现状避免误覆盖把上面的 JSON 存成cors.json跑一遍那条 CLI 命令裂图问题到此为止。想持续看 AWS 从入门到上手的实操案例就跟上 aws-devops-zero-to-hero 项目的节奏后面还有 EKS、Lambda 等实战内容。【免费下载链接】aws-devops-zero-to-heroAWS zero to hero repo for devops engineers to learn AWS in 30 Days. This repo includes projects, presentations, interview questions and real time examples.项目地址: https://gitcode.com/GitHub_Trending/aw/aws-devops-zero-to-hero创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考