Missing icons and svg files after enabling CDN ( CORS Policy issue)

  • Resolved Hello

    (@themophiles)


    4 years, 1 month ago

    Hey, as discussed earlier, I have started using AWS Cloudfront CDN for my WordPress site. But I noticed that everything is working well except there are missing icons or SVG files on my website. Have a look at this screenshot – https://a.cl.ly/v1uxYZRy You can notice that social icons are missing. On inspecting the console on chrome browser, I noticed this has something to do with CORS policy to send correct Access-Control-Allow-Origin headers. I read more information about this here – https://deliciousbrains.com/wp-offload-media/doc/configure-cors-to-resolve-web-font-issues/

    I used these instructions on my Gridpane server but the issue still didn’t resolve.
    Here is what I did – I created a site specific nginx config file with this command –

    nano /var/www/domain.com/nginx/awsbycdn.conf

    and added this value to it –

    location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
    }

    and then I checked and reloaded Nginx. The setting was done properly but the issue hasn’t solved yet. What’s wrong with it?

    kindly help me set this up.

    Regards.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author luckychingi

    (@luckychingi)

    @themophiles

    did you tyr https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

    It mentions:
    By default nginx has no default mime types for fonts, and wrong mime type for .eot files. Go to folder with configs and find where mime types are defined. Usually, that’s in the mime.types file.

    Thread Starter Hello

    (@themophiles)

    It is solved now. The real issue was with the correct nginx configuration.

    Thank you.

    Plugin Author luckychingi

    (@luckychingi)

    @themophiles

    Thanks for the update

    @themophiles Any chance you can share the correct nginx configuration? I have tried everything and cannot get this to work. Some say I need to modify a behavior (but that is one file at a time and there are like hundreds of CORS errors) and there is like 50 different Nginx configurations online.

    It is confusing what is considered the origin and what is not. When talking about a CDN the origin is the site being distributed, but when the CORS issue appears the origin of the files is the CDN… So it is excruciatingly confusing trying to read about and figure out this issue.

    I am using:

    Plesk Obsidian for hosting management
    Ubuntu 16.4
    NGinx proxy web server

    I have tried many different variations of:

    location ~ .(ttf|ttc|otf|eot|woff|woff2|font.css)$ {
	add_header Access-Control-Allow-Origin "*";
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Missing icons and svg files after enabling CDN ( CORS Policy issue)’ is closed to new replies.