Less.js does not work with CDNs?

Question

<link rel="stylesheet/less" href="http://mycdn.s3.amazon.com/css/web/style.less">
<script src="http://mycdn.s3.amazon.com/css/less-1.1.5.min.js"></script>

When I put my .less file in my CDN, it says:

XMLHttpRequest cannot load http://mycdn.s3.amazonaws.com/media/css/bootstrap/lib/bootstrap.less. Origin http://mydomain.com is not allowed by Access-Control-Allow-Origin.

Why? How do I fix this? I do NOT want to compile .css files on server side. I want to keep them client side.

Answer 1

This rather long article from MDN will help you understand what's going on - https://developer.mozilla.org/En/HTTP_access_control

Basically you've run into the cross-domain security model

If you're adamant that you don't want to compile CSS on the server, you could try serving it from your own sub-domain i.e. map a sub-domain to the Amazon CDN but I'm not sure that will fix your problem.

I'd actually question why you don't want to compile the .CSS server-side as this will result in the best performance for your visitors and enables you to easily host the CSS on a CDN.

After the HTML, the CSS is the next most important item to get into the browser so it can start layout and render of a page, by inserting JS into the mix you're slowing this down (particulary as JS can block parallel downloads in some browsers, and will block the UI thread while it executes)

Answer 2

Amazon S3 now supports Cross Origin Resource Sharing: http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Follow the instructions and add a CORS Configuration option to your bucket should fix the problem.