Question Icons not loading after AWS CDN enabled for WordPress website

[Sep B.]

Hi there,

I am a bit confused and not sure anymore where to look. I have tried multiple options, looked over anything that might help but no solution so far.
I have a WordPress website hosted on one of my Plesk servers and I have been trying to set up AWS Cloudfront so I can improve the loading speeds. The setup looks fine and works for the most part. The only issue I have now is that icons won't load at all when the CDN is turned on.

The error I get is as follows:
Access to font at 'https://www.domain.com/wp-content/t...onts/ionicons/webfonts/ionicons.woff2?v=4.0.0' from origin 'Domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Could someone point me in the right direction on how to sort this out?
I have followed the steps mentioned below but none worked. I also tried similar changes in the .htaccess but those did nothing as well.

How to set up CORS (cross-origin resource sharing) in Plesk for Linux?

Applicable to: Plesk for Linux Question How to set up cross-origin resource sharing (CORS) in Plesk to allow example.org to get resources from example.com? Answer Note: CORS is supported in the...

support.plesk.com

WordPress website shows content incorrectly: all icons are shown as a square

Applicable to: Plesk for Linux Symptoms WordPress website example.com or its Admin Dashboard shows content incorrectly - all icons are shown as a square: The following error can be found in...

support.plesk.com

One thing I noticed is that if I follow the steps from the second link, I then get an additional error:
Access to font at 'Domain.com' (redirected from 'https://www.domain.com/wp-content/themes/custom/assets/fonts/ionicons/webfonts/ionicons.woff?v=4.0.0') from origin 'Domain.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *, *', but only one is allowed.

The .htaccess looks like this:

# XFrame Settings
<IfModule mod_headers.c>
    Header always append X-Frame-Options SAMEORIGIN
    Header set X-XSS-Protection "1; mode=block"
    Header set X-Content-Type-Options nosniff
    Header set Access-Control-Allow-Origin "*"
</IfModule>

# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

# BEGIN WP-Optimize Browser Cache
<IfModule mod_expires.c>
  ExpiresActive On

 # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>
# END WP-Optimize Browser Cache

As for a short rundown of how everything is setup:
1. I am using standard settings for the Wordpress hosting
2. NGINX is in "proxy mode" and NGINX cache is enabled
3. The main domain is being displayed as "domain.com" while the CDN resolves as "www.domain.com" but distributes from "dwakldjbawd.cloudfront.net"
4. All security options from Wordpress toolkit have been enabled for the domain
5. Automatic redirect from HTTP to HTTPS enabled
6. HSTS enabled(6months)
7. "Keep websites secured" from SSL/TLS certificate page enabled
8. OCSP Stapling enabled
9. No manual changes have been done to root config files for apache, nginx or anything else on the server

If anyone could point me to a viable solution, that would be perfect.

Thanks

 

[afuego]

I have a similar issue while using AWS Cloudfront on a WordPress site. I went to the Apache & nginx Settings for the domain.

In Additional nginx directives:

add_header Access-Control-Allow-Origin *;