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

Question

I'm using a S3 Bucket with a CloudFront distribution on a sub domain but I get strict-origin-when-cross-origin on a GET request. I can't see what I've done wrong so any help is greatly appreciated. My website url is https://www.project1.tompenn.co.uk/ And my content url is https://content.tompenn.co.uk/TFTSet7_2/traits.json

Developer Console on my website is throwing the error: 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.

Here is the CORS policy on my S3 Bucket:

Here is how my CloudFront Distribution is setup. I only have the one behaviour and this is the config for it:

Answer 1

Okay changing this option seems to have solved my issue.

Answer 2

I had a very similar issue and after hours of banging my head against the wall I found that something with Chrome's HTTP caching mechanism prevents the Origin header from being sent. This is a Chrome-specific issue as I could not reproduce it with Safari. You can check whether this is the case for you as well by toggling the "Disable Cache" option under the Network tab of Chrome developer tools .

To force your request to ignore the cache, use appropriate cache option ( documentation ). This is my final working code:

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