Top Nav

Fixing CORS Issues With RackSpace Cloud Files CDN, W3 Total Cache and WordPress

A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one from which it was served.  For example, an HTML page served from http://acme.com makes an <img> src request for http://mydomain.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. The solution to allowing cross-origin requets is the new Cross-Origin Resource Sharing (CORS) mechanism.

If http://acme.com makes a scripted request for http://mydomain.com/image.jpg then the server hosting mydomain.com must include an “Access-Control-Allow-Origin” header. This header signals to the browser that it is ok to use the resource. The value of the header can be “*” which allows requests from all domains or it can be the name of an individual domain like “acme.com”.

If you’re using WordPress with the W3 Total Cache plugin to host static content on RackSpace Cloud Files, then you may need to add the Access-Control-Allow-Origin header to the object in Cloud Files. Let’s take an example … maybe your theme use a font at:

wp-content/themes/mytheme/fonts/myfont.woff

After you’ve activated the CDN features in W3TC, you may notice that myfont.woff is not loading and you’ll see an error in the console log in your browser indicating the cross-origin problem. The solution is to:

a. Login to mycloud.rackspace.com

b. Go to Storage -> Cloud Files and drill down to the file in question

c. Click the gear icon next to the files and select “Headers”

d. Add the “Access-Control-Allow-Origin” header with a value of “*”.

e. Wait a little while for the change to propagate.

Now your font should load without problems.