S3 not passing correct headers to Cloudfront

16/05/2021

A simple fix for a very annoying issue with AWS Cloudfront and S3.

Assuming that you already configured the appriopriate CORS policy below. Your CORS policy may look different depending on the type of headers, methods and origins that you may want to allow:

This worked fine for all http and https traffic, but it failed for me when using custom protocols (ionic and electron are examples where a custom protocol like: capacitor:// is used). Cloudfront refused to send the correct CORS headers. This can be fixed by overwriting “Origin Custom Headers” with Cloudfront. 

That’s where you can add a custom origin header, which will tell S3 to treat all requests as they came from localhost. Which in our case fixes the issue with the CORS headers.

Thanks for Reading!