5分钟配好S3 CORS配置前端跨域403别再卡住上线【免费下载链接】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配置 没做。规则怎么填、怎么验证一次讲清。浏览器到底在拦什么浏览器是门口那个门卫进门先看证件证件就是 Origin——协议、域名、端口一个字符都不能差。简单请求相当于刷证件进门GET、HEAD 这类直接拿资源的门卫看一眼 S3 返回的响应头认了就放行。复杂请求像拎着大箱子进门PUT、DELETE、自定义请求头门卫先打一个 OPTIONS 预检问一遍规则答对了才放真正的请求进去。被拦的是请求资源一直都在。三种场景三套模板CORS 规则就是一个 JSON 数组常见三种场景差在哪场景关键差异能否用于生产固定域名AllowedOrigins 只填自己域名方法只留 GET/HEAD能最稳开发环境源、方法、头全部用 * 通配不能 ⚠️ 等于给所有页面开门带预检的上传/删除放行 OPTIONS配 MaxAge 减少重复预检ExposeHeaders 带出 ETag能规则要写全通配那套生产禁用。生产主推下面这套只开必要的门{ CORSRules: [ { AllowedOrigins: [https://www.example.com], AllowedMethods: [GET, HEAD], AllowedHeaders: [Content-Type], MaxAge: 3600 } ] }控制台或CLI二选一落地两条路挑顺手的。走控制台打开 S3 控制台选中目标桶切到“权限”标签页编辑“跨域访问CORS”区域粘贴上面的规则保存基本即时生效走 CLI规则存成 cors.json一条命令推上桶aws s3api put-bucket-cors --bucket static-assets --cors-configuration file://cors.json验证CORS是否生效的一条命令别信“保存了就是好了”重放一次预检看 S3 到底回什么curl -sI -X OPTIONS -H Origin: https://www.example.com -H Access-Control-Request-Method: PUT https://static-assets.s3.amazonaws.com/avatar.jpg响应头里出现access-control-allow-origin: https://www.example.com就成了。看响应头就够。浏览器这边刷新页面F12 → Network 找到那条 OPTIONS 预检allow-origin 头回来了图片就该正常渲染。出错了按表排查报错逃不出这四类。对照着查报错现象可能原因排查动作403 blocked by CORS policy源没写全少协议或端口或 GET 不在方法列表对照浏览器地址栏的完整源确认 GET/HEAD 在 AllowedMethods 里预检 OPTIONS 直接失败OPTIONS 没进 AllowedMethods请求头没进 AllowedHeaders补 OPTIONS 与对应请求头重跑上面的 curl 验证改了配置没生效MaxAge 缓存期内浏览器还在用旧预检结果CtrlShiftR 强刷仍不行再查桶策略是否拦截参考 静态网站基础策略直连桶正常、走 CDN 就 403CloudFront 边缘层没透传 CORS 响应头在分发行为里加 CORS 自定义响应头再失效缓存 ⚠️上线前最后过一遍上线前花十分钟过一遍这五条收敛 AllowedOrigins只留真正用到的域名把 cors.json 提交进版本库随代码一起评审给桶挂一条兜底桶策略参考 限制访问的桶策略示例走 CloudFront 分发 S3静态资源 的CDN 行为里同样配 CORS 头给桶加 CloudWatch 错误告警跨域异常当天可见思路可看 CloudWatch 面试问题集S3 CORS配置 说穿了就是让门卫认全你的证件源、方法、预检对齐跨域报错基本归零。细节以 AWS 官方文档为准Amazon S3 CORS 官方文档【免费下载链接】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），仅供参考