使用 S3 Bucket 和 CloudFront 的 CORS 严格来源答案

【问题标题】：CORS Strict Origin using S3 Bucket and CloudFront使用 S3 Bucket 和 CloudFront 的 CORS 严格来源
【发布时间】：2023-01-14 12:55:25
【问题描述】：

我在子域上使用带有 CloudFront 分布的 S3 存储桶，但我在 GET 请求中得到了 strict-origin-when-cross-origin。我看不出我做错了什么，所以非常感谢任何帮助。我的网址是https://www.project1.tompenn.co.uk/ 我的内容网址是https://content.tompenn.co.uk/TFTSet7_2/traits.json

我网站上的开发者控制台抛出错误：Access to fetch at 'https://content.tompenn.co.uk/TFTSet7/traits.json' from origin 'https://www.project1.tompenn.co.uk' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

这是我的 S3 存储桶上的 CORS 策略：

以下是我的 CloudFront Distribution 的设置方式。我只有一种行为，这是它的配置：

【问题讨论】：

标签： amazon-web-services amazon-s3 cors amazon-cloudfront

【解决方案1】：

我遇到了一个非常相似的问题，在用头撞墙数小时后，我发现 Chrome 的 HTTP 缓存机制阻止了 Origin 标头的发送。这是一个特定于 Chrome 的问题，因为我无法用 Safari 重现它。您也可以通过切换 Network tab of Chrome developer tools 下的“禁用缓存”选项来检查您是否属于这种情况。

要强制您的请求忽略缓存，请使用适当的 cache 选项 (documentation)。这是我的最终工作代码：

fetch(url, {
  method: 'GET',
  mode: 'cors',
  cache: 'no-store', // for some reason Chrome's caching doesn't send Origin
})

【讨论】：

【解决方案2】：

好的，更改此选项似乎已经解决了我的问题。

【讨论】：