[Solved] Access To Font At Origin Blocked Access Control Allow Origin Policy

Fix access to the font at origin has been blocked by CORS policy: Access-Control-Allow-Origin (CORS origin) header is on the requested server origin ‘https://www.gomahamaya.com‘

For the increasing performance of our website, we need CDN either you can purchase it from a third party or you can create your own. CDN means loading your website’s complete assets from another subdomain. Actually, it can be interpreted in a simple way that when a user opens a website it can only download from one server but now when you use CDN then the number of data downloaded per second increases and the data server will be chosen based on the user location which ultimately leads to increase in speed.

 

 

Now we if you create your own CDN like cdn.gomahamaya.com then you might end up with various website errors like

1. Access-Control-Allow-Origin (CORS origin) Error

2. Unable to load fonts based small icons

3. Unable to load some javascript files

4. Mixed Content Error

 

Now we will be talking about each issue one by one and we will try to fix all errors related to cross-origin

 

1. Access-Control-Allow-Origin (CORS origin) and loading of fonts  – You are getting this error because you are requesting all files from a different subdomain. If you want to load images from subdomain or domain it will be fine but then you request small fonts and javascript files then it will fail this prevents your website from getting hacked

If you will add this file to the .htacess file then your problem will be solved

 

Note – file match type means we are allowing only matched files and don’t use only ” Header set Access-Control-Allow-Origin “*“ ” it increases the chance of getting hacked by a technique call clickjacking. That’s why we are adding match type

Below codes are only for the Nginx server 

Note–Above code will fix cors origin error and Unable to load fonts based small icons error

3. Now we will try to fix Unable to load some JavaScript files – Add the below code inside your theme .htacess file like wp-content/themes/.htacess

 

Note– don’t forget to change cname with your own cname domain. if it still doesn’t fix your issue you might want to try jquery-updator

4. Now how to fix mixed content – mixed content means some website resources are getting loaded over HTTPS and some resources are

loading over HTTP so to fix this issue you need to force SSL on your CDN subdomain like https://cdn.gomahamaya.com or you can use both subdomain and domain on HTTP.

Note for the people who are still struggling with ” access control allow origin ” – Cloudflare has its own CDN you can’t combine both you need to pause Cloudflare CDN for a while then test it will work 100%

Now bingo no more issue related to access to the font at origin blocked access control allow origin policy.

Hand picked more related articles for you

Best Cache Plugins WordPress 2018

Best Amp Plugin For WordPress