Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2016-07-26 15:10:11

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,795
Website

Solve Cross-domain Issues

Cross-domain issues sometimes arise when webpages call upon file assets served from a separate domain to that on which the page resides. With Backlight, cross-domain issues may arise when viewing your website in Firefox or IE10, and when your are accessing the site from a domain or subdomain other than that on which the site is hosted, for example when you have a subdomain redirected to your main domain, or a secondary domain redirected to your main domain. For example, if I have my site hosted at http://happyaccidentphotography.com, and then I also own http://happyaccidentphoto.com and have it redirecting to the former address.

Most often, cross-domain issues will manifest in Font Awesome icons and other web fonts failing to render, or broken images on the page.

Further, you may find that if your page is failing to load correctly at "http://www.yourdomain.com", loading "http://yourdomain.com" instead -- not prepended with "www" -- will correctly render the page, or vice-versa.

In your browser's console log, you may also see a message like this one:

XMLHttpRequest cannot load http://yourdomain.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.yourdomain.com' is therefore not allowed access.

The Fix

The fix for cross-domain web font issues is pretty easy. At the root of your domain, you will need to edit the existing .htaccess file, or if no such file exists then create it using a text-editor. In the file, put the following code:

<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

<IfModule mod_mime.c>

  # Web fonts
	AddType application/font-woff woff
	AddType application/vnd.ms-fontobject eot

	# Browsers usually ignore the font MIME types and sniff the content,
	# however, Chrome shows a warning if other MIME types are used for the
	# following fonts.
	AddType application/x-font-ttf ttc ttf
	AddType font/opentype otf

	# Make SVGZ fonts work on iPad:
	# https://twitter.com/FontSquirrel/status/14855840545
	AddType		image/svg+xml svg svgz
	AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
    RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

This allows your other domains to access assets originating from your main domain. The AddType lines set the correct MIME types for the font files; not essential, but nice to do while we're here. The final directive normalizes all incoming URLs to eliminate “www.” from the address.


Matt

The Turning Gate, http://theturninggate.net

Offline

Board footer

Powered by FluxBB