Caching effect on CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

The short version of this issue is we are seeing the typical CORS error (x has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header is present on the

Answer 1

I was having same problem here is how I solved it. Added Corsrule for wildcard domain(you can choose you origin domain)

    *
    GET
    HEAD
    3000
    *

Then go to

CloudFront Distribution > Origin and Origin Groups > Edit Origin

In your "Origin Custom Headers" fill "Header Name" value "origin" and "Value" to "https://www.yourorigindomain.com"

When you click on info icon in the right of Origin Custom Headers you will see the message:

All custom header keys and values you specify here will be included in every >request to this origin. If a header was already supplied in the client request, it is overridden.

So cloudfront add origin header in every request it made to s3 bucket, wheather you pass it from client or not and cache response the headers.

You can check access-control-allow-origin: * in response header using

`curl -i https://cloufrontdistributiondomain.com/example.png`

i.e without passing the host.