Sadly, I could not find this info in one post. May be not everyone had to poke around as much as me.
Basic facts:
- Browsers do not send PREFLIGHT / OPTIONS request all the time (mostly only when an expensive process (like: posting, putting data / files))
- But browsers need a access-control-allow-origin: https://origin.domain.xyz header in the response to get requests
- S3 responds with CORS headers (below) only when request contains: Origin and Access-Control-Request-Method
access-control-allow-origin: https://origin.domain.xyz
access-control-allow-methods: GET
access-control-max-age: 3000
access-control-allow-credentials: true
- Browsers do not send the Access-Control-Request-Method: GET header on their own.
Solution:
- Configure CloudFront to send: Access-Control-Request-Method: GET [,POST,PUT] for each request. ( I don't yet see a scenario where other request types could be needed )
Do the above by: editing the "origin" settings; add a custom header with the key value as above.
The General Procedure as of now does not mention the above:
Process on CloudFront:
Process for S3:
https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
Some useful comments:
- Origin header is needed in request for access-control-* headers in response (this is s3 behaviour)
https://stackoverflow.com/a/32887912
- The entire page has useful info:
https://stackoverflow.com/questions/17533888/s3-access-control-allow-origin-header
Suggested tools for testing:
- curl
* this one simulates what browsers usually send:
curl --head your://url/here --header 'Origin: https://origin.domain.xyz'
* can vary this to send OPTIONS, other CORS headers,
- postman
- can use GUI to construct the above cURL request :D