AWS S3存储桶CORS问题：KaboomJS加载精灵资源被拦截如何解决

• 核对S3 CORS规则配置
  确保规则配置覆盖以下要求：

  

  • AllowedOrigins 准确匹配请求源站，你当前的请求源是https://example.io，需要精确填写，测试阶段可临时设为*验证
  • AllowedMethods 必须包含GET方法（加载静态资源默认用GET请求）
  • AllowedHeaders 测试阶段可设为*，避免自定义头被拦截
    正确的JSON规则示例：

  [
    {
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET"],
      "AllowedOrigins": ["https://example.io"],
      "ExposeHeaders": [],
      "MaxAgeSeconds": 3000
    }
  ]
  

• 检查S3资源权限
  确认目标资源bird.png是公开可读状态，或者你请求的URL携带了有效的签名参数；同时检查存储桶策略、访问控制列表(ACL)没有拦截源站请求。
• 清除缓存后测试
  浏览器会缓存CORS预检请求结果、S3也可能存在配置缓存，测试时请开启浏览器无痕模式，或者在开发者工具网络面板勾选「禁用缓存」后刷新页面验证；如果使用了CDN代理S3资源，需要同时清除CDN缓存。
• 补充前端跨域配置
  KaboomJS的loadSprite方法需要显式配置跨域属性，修改加载代码为：

  loadSprite("bg", "https://cubie.s3.ap-southeast-1.amazonaws.com/bird.png", { crossOrigin: "anonymous" });
  

• 后端CORS头验证
  用curl命令直接发送预检请求验证S3是否返回了正确的CORS头：

  curl -H "Origin: https://example.io" -H "Access-Control-Request-Method: GET" -X OPTIONS -v https://cubie.s3.ap-southeast-1.amazonaws.com/bird.png
  

  若响应头中没有access-control-allow-origin字段，说明S3配置未生效，重新检查规则配置；如果使用了CloudFront等CDN，需要确认CDN已开启OPTIONS请求转发、同时配置了对应的CORS规则。

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