CORS error - HTML and fonts not working properly with CloudFront CDN

Question

I have been trying to get my magento store working with AWS CloudFront for static and media folders. I have one CloudFront distribution for each of the folders. Media files are working fine as well as most of the static files.

The only things that is failing is html and fonts - I get a CORS error. I have been trying to figure out the issue, but have no idea how to proceed. I have validated the CORS headers - they seem to be ok.

My .htaccess in pub/static/ below:

<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 always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
   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>

Anyone has any idea where should I start investigating or what might be the problem?

The below works for CSS files and all others. HTML matches the same rule, so I am not sure why only HTML files are showing this error.

I have used this link as a guide: mageplaza.com/kb/setup-amazon-cloudfront-cdn-in-magento-2.html They mention something about the HTML files not working properly, but they do not explain what do they mean behind that...

Answer 1

I had this same issue recently.

Changing the below

Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept"

TO

Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept, X-Requested-With"

Resolved the issue for me. Flush magento cache and invalidate cloudfront

Answer 2

Way-1:

pub/static:The path to change the configuration of pub/static is pub/static/.htaccess

The origin file

<IfModule mod_headers.c>
   <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
       Header append Cache-Control public
   </FilesMatch>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>

Please change to

<IfModule mod_headers.c>
<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|html|json)$>
   Header set Cache-Control "max-age=604800, public"
   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Methods "GET, OPTIONS"
   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>

Please note that the html and json extensions will be changed by the extension of the file. Hence, you need to review the configuration Catalog Store, which may relate to security issues, to ensure that the html extension works.

pub/media:Please use the path pub/media/.htaccess to change the header of media files.

The original file is as follow:

<IfModule mod_headers.c>
   <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
       Header append Cache-Control public
   </FilesMatch>
   <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)$>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>

Please change the content of into:

<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
   Header append Cache-Control max-age=604800
   Header set Access-Control-Allow-Origin "*"
</FilesMatch>

After modifying the configurations of pub/static and pub/media, your Magento 2 website is ready for the new distribution of static files and media from Amazon CloudFront.

Way-2:

Changes in AWS CloudFront

For the AWS CloudFront Distribution, a new CNAME record should be added. Add the Alternative Domain Names (CNAMEs) by clicking on distribution from the AWS CloudFront Distributions list.Also, choose the Custom SSL Certificate for the SSL Certificate settings.