2

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.

2
  • I've also tried adding "header('Access-Control-Allow-Origin: *');" directly to the site template, still no go?
    – shparkison
    Jun 16 '14 at 18:46
  • Are the fonts having the same issue? I'm asking because I want to isolate which rule isn't working.
    – Sobral
    Jun 16 '14 at 21:24
1

So it turned out the problem was an ajax call within one of my scripts. I was under the assumption it was image related as the images were the only items receiving an error, they were also not loading. Fonts were loaded, and it appeared as though the scripts were loading fine as well.

After removing all the scripts and adding them back one-by-one I was able to pinpoint that it was an ajax call causing the issue.

After adjusting my script I was able to make everything work as expected. The above .htaccess worked fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.