Ahmad Naser Turnkey Ecosystem Ahmad Naser
April 13, 2019

Correct configuration to fix CORS issue with CloudFront

Published in the Ahmad Naser ecosystem. Estimated reading time: 5 minutes.

If you are using CloudFront for hosting static assets and having trouble with the CORS which prevents the icons from displaying properly on your website, in this post, I am going to show how to resolve this issue.

In case you are having an issue with woff2 or woff or any static fonts, here is the solution.

two steps to solve CORS issue on CloudFront are:

Make change to Nginx or Apache configuration to add Access-Control-Allow-Origin: * to the response data. You can take a look at some guides: http://enable-cors.org/server_apache.html and http://enable-cors.org/server_nginx.html

Add a behavior in CloudFront distribution, remember to whitelist the Origin header

but first you need to have a cdn account with cloud front:
https://console.aws.amazon.com/cloudfront/home

Second. Register new distribution with amazon cloud front by following the default steps

Third assign a CName, make sure you have admin@yourdomain.com email enabled to verify your cdn custom name:

you need to enable cross origin by using php and .htaccess file

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');
<IfModule mod_mime.c>
    AddType application/vnd.ms-fontobject    .eot
    AddType application/x-font-opentype      .otf
    AddType image/svg+xml                    .svg
    AddType application/x-font-ttf           .ttf
    AddType application/font-woff            .woff
    AddType application/font-woff2           .woff2
</IfModule>
<FilesMatch "\.(ttf|otf|eot|woff|woff2|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
# BEGIN WordPress
<IfModule mod_rewrite.c>
Header set Access-Control-Allow-Origin "*"
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Complete example of my htaccess using WPFC

# BEGIN WpFastestCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTPS} =on
RewriteCond %{HTTP_HOST} ^arabiccs.com
# Start WPFC Exclude
# End WPFC Exclude
# Start_WPFC_Exclude_Admin_Cookie
RewriteCond %{HTTP:Cookie} !wordpress_logged_in_[^\=]+\=admin|wpengine
# End_WPFC_Exclude_Admin_Cookie
RewriteCond %{HTTP_HOST} ^arabiccs.com
RewriteCond %{HTTP_USER_AGENT} !(facebookexternalhit|Twitterbot|LinkedInBot|WhatsApp|Mediatoolkitbot)
RewriteCond %{HTTP_USER_AGENT} !(WP\sFastest\sCache\sPreload(\siPhone\sMobile)?\s*Bot)
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{REQUEST_URI} !(\/){2}$
RewriteCond %{REQUEST_URI} \/$
RewriteCond %{QUERY_STRING} !.+
RewriteCond %{HTTP:Cookie} !comment_author_
RewriteCond %{HTTP:Cookie} !safirmobilswitcher=mobil
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/all/$1/index.html -f [or]
RewriteCond /home/sites/5a/5/588fcf3fd5/public_html/wp-content/cache/all/$1/index.html -f
RewriteRule ^(.*) "/wp-content/cache/all/$1/index.html" [L]
</IfModule>
<FilesMatch "index\.(html|htm)$">
AddDefaultCharset UTF-8
<ifModule mod_headers.c>
FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Mon, 29 Oct 1923 20:30:00 GMT"
</ifModule>
</FilesMatch>
# END WpFastestCache
# BEGIN GzipWpFastestCache
<IfModule mod_deflate.c>
AddType x-font/woff .woff
AddType x-font/ttf .ttf
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE x-font/ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>
# END GzipWpFastestCache
# BEGIN LBCWpFastestCache
<FilesMatch "\.(webm|ogg|mp4|ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)?$">
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A0
ExpiresByType video/webm A10368000
ExpiresByType video/ogg A10368000
ExpiresByType video/mp4 A10368000
ExpiresByType image/webp A10368000
ExpiresByType image/gif A10368000
ExpiresByType image/png A10368000
ExpiresByType image/jpg A10368000
ExpiresByType image/jpeg A10368000
ExpiresByType image/ico A10368000
ExpiresByType image/svg+xml A10368000
ExpiresByType text/css A10368000
ExpiresByType text/javascript A10368000
ExpiresByType application/javascript A10368000
ExpiresByType application/x-javascript A10368000
</IfModule>
<IfModule mod_mime.c>
    AddType application/vnd.ms-fontobject    .eot
    AddType application/x-font-opentype      .otf
    AddType image/svg+xml                    .svg
    AddType application/x-font-ttf           .ttf
    AddType application/font-woff            .woff
    AddType application/font-woff2           .woff2
</IfModule>
<IfModule mod_headers.c>
Header set Expires "max-age=A10368000, public"
Header unset ETag
Header set Connection keep-alive
FileETag None
</IfModule>
</FilesMatch>
# END LBCWpFastestCache
<FilesMatch "\.(ttf|otf|eot|woff|woff2|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
# BEGIN WordPress
<IfModule mod_rewrite.c>
Header set Access-Control-Allow-Origin "*"
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Enable Origin Using your cloudfront account:

we recommend using
HTTP Headers by Dimitar Ivanov wordpress plugin and configure the settings as following

in other cases and if you are using nginx, we recommend the following
1-Edit common_http.conf

# Enable browser cache for fonts & fix @font-face cross-domain restriction (TTL is 60 days)
location ~* \.(eot|ttf|otf|woff|woff2|svg|svgz)$ {
   include proxy_params_common;
   include proxy_params_static;
   expires 60d;
   add_header Access-Control-Allow-Origin *;

}

2-Add the origin to cloudfront behavior
3-set Invalidations inside cloudfront, eg:

/wp-content/themes/sahifa/fonts/tiefont/fontello.woff
/wp-content/plugins/greenbackend-arabic-fonts/arabic-fonts/smart4ds.woff 
/wp-content/themes/sahifa/fonts/tiefont/fontello.woff
/wp-content/plugins/greenbackend-arabic-fonts/arabic-fonts/smart4ds2.woff
/wp-content/themes/sahifa/fonts/BebasNeue/BebasNeue-webfont.woff
/wp-content/plugins/arqam/fonts/arqicon.ttf

in case you are using WP-Optimize wordpress plugin you need to configure both the cookies caching and pages caching correctly as following

URLs to exclude from cache

/cart/*
/khottah-checkout/*
/ektesah-checkout/*
/checkout/*
/wc-api/*
/checkout/
/wc-api/Eh_PayPal_Express_Payment/*
/learn/*
/library/*
/wp-login.php*
wp-login.php/*

Cookies caching

wordpress_test_cookie
wordpress_logged_in_*
wp_woocommerce_session_*
tve_secret
wordpress_*
tva_conversions

Thats all,

if you need paid support on this, message me via whatsapp www.wtsb.me

Leave a Reply

Your email address will not be published. Required fields are marked *