Less.js not working with CDN?

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 on my CDN, it says:

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

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

Answer 1

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

Mostly you came across a cross-domain security model

If you are categorical that you do not want to compile CSS on the server, you can try to serve it from your own subdomain, i.e. map subdomain to Amazon CDN, but I'm not sure what to fix your problem.

In fact, I would ask why you do not want to compile the server .CSS server, as this will lead to better performance for your visitors and allow you to easily place CSS on a CDN.

After HTML, CSS is the next most important element to get into the browser, so that it can start page layout and rendering by inserting JS into the mix, which you slow down (especially since JS can block the parallel loading in some browsers and will block the user stream interface during its execution)

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 the CORS Configuration option to your bucket to fix the problem.

Answer 3

If you want to set up cross-domain access, you need to look at things like Cross Origin Resource Sharing (http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing), but this is only supported by modern browsers or JSONP, but it it would be impossible with your CDN, I think.

I have to agree with @Andy Davies, why aren't you compiling .less since this will fix the problem? Is it because the file size is being delivered or you cannot compile without any changes when clicking files in real time? In Visual Studio, you can use addins, such as http://www.mindscapehq.com/products/web-workbench , which will be compiled when changes occur.