Question 71916 in Amazon Web Sevices Question posted in
The official Amazon Web Services documentation can be found here.

CORS Strict Origin using S3 Bucket and CloudFront – Amazon web services

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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
})
    Login or Signup to reply.
  3. 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', 
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search