I've run into this problem before, and took an alternate route. Basically, I'm using MaxCDN to deliver my images/fonts/js/css. To do this I set a global variable to point to the cname for my cdn url (i.e. http://cdn.mysite.com/). The problem is I'm getting all kinds of
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Errors? I've tried the various .htaccess methods to alleviate this, but nothing seems to work?
Here's what I currently have, which is just the recommended settings from MaxCDN, with the index.php removal for EE:
<IfModule mod_rewrite.c>
############################################################################################
#Section 1
RewriteEngine On
IndexIgnore *
Options +FollowSymLinks -Multiviews -Indexes
############################################################################################
# ----------------------------------------------------------------------
# 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>
# ----------------------------------------------------------------------
# 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|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
# Removes index.php from EE
RewriteCond $1 !\.(gif|jpe?g|png)$ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php?/$1 [L,QSA]
# If 404s, "No Input File" or every URL returns the same thing
# make it /index.php?/$1 above (add the question mark)
</IfModule>
Unfortunately, I'm still receiving the errors? If I change my sites "site_url" within the EE config to point to my CDN, and then use {site_url} it works, but this breaks other things for obvious reasons.
The other thing I found interesting is if I use the Minimee EE module, and set the URL to the cdn, the js and css can be served via the CDN and I don't have problems. However, the caveat here being, any images that point to the cdn within the css files also receive an error.