CORS error on Magento 2 with cloudfront

Question

We are running magento 2 on below setup

Apache > Varnish > NGinx SSL termination

On initial setup we were getting the below error for all assets in pub/static

Failed to load xxx: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

I have added the below to /pub/static/.htaccess this resolved our issues for .css files and all other assets except .html files and .json files

<IfModule mod_headers.c>
<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|html|json|swf|eot|ttf|otf|woff|woff2)$>
   Header set Cache-Control "max-age=604800, public"
   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS' always"
   Header set Access-Control-Max-Age "604800"
   Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept"
</FilesMatch>
   <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)$>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>

Our header from our CSS files and HTML matches so I am not sure why only HTML files are showing this error. Headers below

HTML HEAD

HTTP/1.1 200 OK => 
Content-Type => text/html
Content-Length => 2018
Connection => close
Server => nginx
Date => Sat, 31 Aug 2019 14:46:42 GMT
Last-Modified => Sat, 31 Aug 2019 07:37:44 GMT
Cache-Control => max-age=604800, public
Expires => Sun, 30 Aug 2020 14:46:42 GMT
Access-Control-Allow-Origin => *
X-UA-Compatible => IE=edge
X-Frame-Options => SAMEORIGIN
Access-Control-Allow-Methods => GET, POST, PUT, DELETE, OPTIONS' always
Access-Control-Max-Age => 604800
Access-Control-Allow-Headers => Host, Content-Type, Origin, Accept
X-Content-Type-Options => nosniff
X-Nginx-Cache-Status => EXPIRED
X-Server-Powered-By => Engintron
Vary => Accept-Encoding
X-Cache => Hit from cloudfront
Via => 1.1 XXX.cloudfront.net (CloudFront)
X-Amz-Cf-Pop => ORD50-C1
X-Amz-Cf-Id => XXXOFKszmpSr0kvAFMTr1vEz3lgQZP4RBI53WhL-Q==
Age => 20

CSS HEAD

HTTP/1.1 200 OK => 
Content-Type => text/css
Content-Length => 694946
Connection => close
Server => nginx
Date => Sat, 31 Aug 2019 15:08:32 GMT
Last-Modified => Sat, 31 Aug 2019 14:28:03 GMT
Access-Control-Allow-Origin => *
X-Frame-Options => SAMEORIGIN
Access-Control-Allow-Methods => GET, POST, PUT, DELETE, OPTIONS' always
Access-Control-Max-Age => 604800
Access-Control-Allow-Headers => Host, Content-Type, Origin, Accept
Expires => Mon, 30 Sep 2019 15:08:32 GMT
Cache-Control => max-age=2592000
Pragma => public
Accept-Ranges => bytes
Vary => Accept-Encoding
X-Cache => Miss from cloudfront
Via => 1.1 xxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Pop => ORD51-C1
X-Amz-Cf-Id => xxxx_Kfn0XAc6fyM81iNUQ==

The Access-Control-Allow-Origin => * is visible in both headers. Does anyone know why we may still be getting an error on HTML?

Thanks

Answer 1

you have typo in headers:

Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS' always"
Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept"

probably must be like:

Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept, X-Requested-With"