Problem

If you have a static file server on S3 … this loads fine:

<link rel="stylesheet"
      href="http://static.example.com/css/screen.less"
      type="text/css"
      media="screen, projection, print">

This … does not load.

<link rel="stylesheet/less"
      href="http://static.example.com/css/screen.less"
      type="text/css"
      media="screen, projection, print">

Reason

Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, a resource loaded from Domain A (http://domaina.example) such as an HTML web page, makes a request for a resource on Domain B (http://domainb.foo), such as an image, using the img element (http://domainb.foo/image.jpg). This occurs very commonly on the web today — pages load a number of resources in a cross- site manner, including CSS stylesheets, images and scripts, and other resources.

Cross-site HTTP requests initiated from within scripts have been subject to well-known restrictions, for well-understood security reasons. For example HTTP Requests made using the XMLHttpRequest object were subject to the same- origin policy. In particular, this meant that a web application using XMLHttpRequest could only make HTTP requests to the domain it was loaded from, and not to other domains. Developers expressed the desire to safely evolve capabilities such as XMLHttpRequest to make cross-site requests, for better, safer mash-ups within web applications.

Read more here …

Fix (Amazon S3 Only)

If you’re using Amazon S3, they announced Cross-Origin Resource Sharing (CORS) support … enable cross domain using a CORs policy just like the one below … (for GET requests, see official documentation for more examples and details).

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>http://domain1.com</AllowedOrigin>
    <AllowedOrigin>http://domain2</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
    <ExposeHeader>x-amz-request-id</ExposeHeader>
    <ExposeHeader>x-amz-id-2</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

S3 will then send the appropriate The_HTTP_response_headers.

1. In-browser rel=”stylesheet/less” not loading from static file server
2. Announcement: Announcing Amazon S3 Support for Cross-Origin Resource Sharing (CORS)
3. How Do I Enable CORS On My Bucket?
4. HTTP access control (CORS) - Mozilla Developer Network