Chrome从AWS Bucket获取图片时未发送HTTP Headers问题求助

结合你遇到的Chrome与Firefox跨域请求差异，以及S3 CORS的常见坑点，大概率是以下几个原因导致的问题：

• Fetch请求模式配置错误：如果你的fetch代码手动设置了mode: 'no-cors'，Chrome会强制不发送Origin头，而Firefox的宽松策略可能仍允许请求通过。检查代码，确保请求模式为默认的cors（无需手动设置，除非之前改过错）。示例正确写法：

  fetch('https://your-bucket.s3.amazonaws.com/target-image.jpg')
    .then(res => res.blob())
    .then(blob => { /* 处理图片逻辑 */ });
  

• S3 CORS规则缺失GET方法：确认你的Bucket CORS配置里明确包含GET方法。很多人配置时会漏掉这个，触发Chrome的严格校验失败。标准的CORS规则示例：

  [
    {
      "AllowedHeaders": ["*"],
      "AllowedMethods": ["GET"],
      "AllowedOrigins": ["https://your-app-domain.com"],
      "ExposeHeaders": []
    }
  ]
  

• Chrome缓存干扰：Chrome会缓存跨域资源的CORS校验结果，即使你更新了Bucket的CORS配置，旧缓存仍会生效。按Ctrl+Shift+R强制刷新页面，或者打开开发者工具「Network」面板，勾选「Disable cache」后重新测试。

• AllowedOrigin配置不精确：如果你的AllowedOrigin用了通配符*，Chrome在部分场景下（比如隐含凭证的请求）会直接拒绝。如果请求不需要凭证，将AllowedOrigin设为你的实际业务域名（而非通配符）；如果需要携带凭证，必须指定具体域名，同时在CORS规则中添加AllowCredentials: true。

最后，打开Chrome开发者工具「Network」面板，定位到图片请求的「Request Headers」部分，确认是否真的没有Origin字段：

1. 若确实无Origin，优先排查fetch请求的模式配置
2. 若存在Origin，检查其值是否与CORS规则中的AllowedOrigin完全匹配

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