10

We are using Amazon S3 + CloudFront for serving JSON files. We uploaded two files lets consider as j1.json and j2.json. Both files initially responding valid CORS headers in the response, but when running invalidation on j2.json its header responses changed, and we are facing CORS issue.

CORS permissions set on S3 bucket - 

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Response headers for j1.json

enter image description here

Response headers for j2.json enter image description here

Both JSON files in the same bucket, but j2.json response missing these headers

Access-Control-Allow-Methods →GET
Access-Control-Allow-Origin →*
Access-Control-Max-Age →3000

We tried deleting and uploading again object, it's not responding CORS headers in the response. What is the possible reason for this issue? And how to solve it?

RockStar
  • 1,304
  • 2
  • 13
  • 35
  • Clear your browser cache and try in other browsers. The most likely explanation when this happens is a stale cached copy of a file – sideshowbarker Jul 24 '17 at 13:50
  • @sideshowbarker We already tried different browsers, clear cache and hard reload. Same from Postman also. No luck so far. – RockStar Jul 24 '17 at 14:37
  • 2
    Is the CloudFront distribution configured to forward `Access-Control-Request-Headers`, `Access-Control-Request-Method`, and `Origin` headers to S3 (in "Cache Behavior")? Are you sending an `Origin:` header (and the others) when testing with postman? Can you show URLs? – Michael - sqlbot Jul 24 '17 at 20:04
  • @Michael-sqlbot Thanks, CloudFront distribution forward headers solved the issue. Please submit as an answer, I will upvote and mark it as solved. – RockStar Jul 25 '17 at 09:14

2 Answers2

34

Before S3 will return correct CORS response headers, it needs to see that the request is a CORS request.

CloudFront, by default, forwards as few headers to the origin as possible, since the fewer headers the origin requires, the better your cache hit rate will tend to be (because any header not sent to the origin can't cause the origin to vary its response, thus all responses to a given request would be expected not to vary, and thus be cacheable). But for a CORS request, we need S3 to see some specific headers so it can react accordingly.

In the Cache Behavior configuration, you'll need to whitelist these 3 request headers for forwarding to the origin.

Access-Control-Request-Headers
Access-Control-Request-Method
Origin

Once this change completes, an invalidation might also be appropriate.

Michael - sqlbot
  • 169,571
  • 25
  • 353
  • 427
1

Just adding to the answer of 'Michael - sqlbot', it seems now it is also required to whitelist Access-Control-Allow-Origin header. It might not show in the dropdown; then you will need to type it out!

I am also appending other configurations that helped me to get it working, might help someone: https://stackoverflow.com/a/67929204/5657783

adripo
  • 38
  • 5
Ankit Shubham
  • 2,989
  • 2
  • 36
  • 61