I recently installed Divi theme in one of my website. After activating Divi theme, I saw some visual error in my website. Some icons weren’t showing up well. For example, I was seeing ‘5 instead of ‘> icon and ‘U‘ instead of search icon. It was huge visual hindrance for the website. So, I started to do research on this issue.

On inspecting the error, I saw an error which said ‘No ‘Access-Control-Allow-Origin’ header is present on the requested resource…‘. My website is using SSL certificate and thus is accessible through https links. The icons may be in http link. As Chrome doesn’t allow cross domain access by default, I should have seen this error. What I need then was good solution to this issue. And, I got my solution after spending some half day researching over internet.

Solution to “No ‘Access-Control-Allow-Origin’ header is pres…” error:

Open the main .htaccess file of your website. It’s in the directory where you’ve installed WordPress. It may hidden if you are looking from the file manager of CPanel. In that case, click on the setting and check the checkbox show hidden files as shown in following screenshot:

Show hidden files in cpanel file manager

Edit the .htaccess files and add following code:

[php]# Webfont access
# ———————————————————————-
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>[/php]

Above code solved the issue in my website. But, if it doesn’t in your case, you can add following code above the code we added just before:

[php]# ———————————————————————-
# CORS-enabled images (@crossorigin)
# ———————————————————————-
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
# mod_headers, y u no match by Content-Type?!
<FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
</IfModule>
</IfModule>[/php]

This should have certainly solved your issue.

Wrapping up

I hope this article was useful for you. If it doesn’t solve your issue or you’ve better solution to this issue, please let me know from the commen/t box below. I’ll be looking forward to your comments and suggestions. And, we’re posting new articles in almost every two days.

So, keeping following wpcounsel.