3

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.

enter image description here

Here is the CORS policy on my S3 Bucket: enter image description here

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

tom penn
  • 171
  • 10

3 Answers3

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
})
Stephen
  • 175
  • 1
  • 8
0

Okay changing this option seems to have solved my issue. enter image description here

tom penn
  • 171
  • 10
0

You can check your cloudfront and S3 configuration based on these links:

Also, as Stephen pointed out, Chrome also has caching that may cause CORS, which can be addressed with:

fetch(myRequest, {
  method: 'GET',
  mode: 'cors',
  cache: 'no-store', 
})
Yang Liu
  • 541
  • 9
  • 26