WordPress Allow Cross Domain Resources – An easy guide

Loading resouces from other domain or sub-domain can increase the performance and loading time of your wordpress site. We earlier explained how to move wordpress wp-content folder to subdomain. But browsers can block the contet loaded from other domains due to Cross-Origin Resource Sharing policy. Especially the web fonts like Font Awesome can be blocked by browsers if those are loaded from other domains. So you need to perform an extra step to allow resource sharing from other domains.

Here is the simple approach on how to achieve cross domain resource sharing:

See Also: Move WordPress content folder to sub-domain.

Load resources from sub-domain:

Suppose your WordPress site runs on domain “example.com” and you want to load resources from “files.example.com”.
Open the .htaccess file on root of you WordPress directory. And add following lines to it:

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
    </FilesMatch>
</IfModule>

The above code will allow the CSS, javascript and font files to be shared from the sub domain of your site.

Load resources from all other domains:

# Allow font, js, and css to be loaded from subdomain
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

The above code will allow the CSS, javascript and font files to be shared from all other domains.