title: How do I allow CSS files to be referenced from other domains?
body: <p>I set up two websites. One, <a href="http://static.example.com/" rel="nofollow">http://static.example.com/</a>, is hosting static files. Another one, <a href="http://www.example.com/" rel="nofollow">http://www.example.com/</a> hosts a web application.</p>
  
  <p>When, within <a href="http://www.example.com/" rel="nofollow">http://www.example.com/</a>, I reference images from the static site such as <a href="http://static.example.com/logo.png" rel="nofollow">http://static.example.com/logo.png</a>, the image is displayed correctly. However, when I put:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="http://static.example.com/demo.css" /&gt;
  </code></pre>
  
  <p>on the page, the style from <code>demo.css</code> is not applied to the page.</p>
  
  <p>In Chrome's Developer Tools:</p>
  
  <ul>
  <li><p>In <em>Network</em> tab, I can clearly see the <code>demo.css</code> file being requested and received (HTTP 200 or HTTP 304) by the browser. If open the file in the new tab, the CSS code is displayed correctly.</p></li>
  <li><p>In <em>Network</em> tab, when I click on the file and open <em>Response</em> sub-tab, it shows: <em>“This request has no response data available.”</em></p></li>
  <li><p>In <em>Sources</em> tab, there is <a href="http://static.example.com/" rel="nofollow">static.example.com</a> node and it contains <code>demo.css</code>, but when I click on <code>demo.css</code>, the panel at the right remains empty, as if the file was empty.</p></li>
  </ul>
  
  <p>Is there a sort of cross-origin policy for CSS files?</p>
  
  <p>If I replace the style file by, for instance, <a href="http://cdn.sstatic.net/Sites/stackoverflow/all.css" rel="nofollow">http://cdn.sstatic.net/Sites/stackoverflow/all.css</a>, the one used by Stack Overflow, the style is applied to the page.</p>
  
  <p>Notes:</p>
  
  <ul>
  <li><p>The CSS file <code>demo.css</code> contains just <code>body{color:red;}</code>. The HTML page  contains a body with a <code>&lt;p&gt;Hello, World!&lt;/p&gt;</code> inside. The browser shows black text. I would expect it to show red text instead.</p></li>
  <li><p>I replaced the actual TLD by <code>example.com</code>, the actual structure and domain names are very similar.</p></li>
  <li><p>I can reproduce the issue with Chromium 49 and Firefox 45.</p></li>
  </ul>