使用Serverless Framework部署至S3的React应用遇CORS错误求助

以下是针对该问题的具体排查步骤：

• 检查CORS配置的方法与头权限
  确保S3桶的CORS规则包含OPTIONS方法（浏览器预请求必需），同时AllowedHeaders覆盖请求中携带的所有头（比如Content-Type、自定义请求头）。若不确定，可暂时将AllowedHeaders设为"*"，AllowedMethods包含"GET"、"OPTIONS"进行测试。

• 验证S3对象的读取权限
  即使桶的Block Public Access已关闭、ACL设置为Bucket Owner Preferred，仍需检查单个静态资源（JS/CSS/HTML文件）的权限是否允许公开读取。可通过AWS控制台查看对象权限，或执行以下CLI命令：

  aws s3api get-object-acl --bucket <你的桶名> --key <资源路径，比如static/js/main.xxx.js>
  

  确认存在允许所有用户执行s3:GetObject的权限条目。

• 排查CloudFront（若使用）的CORS配置
  如果Serverless部署搭配了CloudFront分发：

  • 确保CloudFront行为（Behavior）中开启转发Origin请求头到S3；
  • 检查响应头策略是否包含Access-Control-Allow-Origin等CORS相关头，或配置为允许S3返回自身的CORS响应头；
  • 确认缓存策略不会缓存OPTIONS请求的响应，避免旧缓存导致配置不生效。

• 清除浏览器缓存或用无痕模式测试
  浏览器可能缓存了旧的CORS响应，导致新配置生效后仍报错。尝试清除缓存，或直接用无痕窗口打开应用验证。

• 核对Serverless模板的CORS配置是否生效
  用CLI命令查看桶的实际CORS配置，确认与Serverless.yml中的定义一致：

  aws s3api get-bucket-cors --bucket <你的桶名>
  

  检查Origin是否完全匹配请求中的Referer/Origin（注意协议、域名、端口的一致性，比如https://example.com和https://www.example.com是不同的源）。

内容的提问来源于stack exchange，提问作者gbryant