title: CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
body: <p>I am developing an Angular 4 app and I want to apply some global styles.  Following the <a href="https://angular.io/tutorial/toh-pt5#global-application-styles" rel="noreferrer">tutorial at the angular site</a>, I've created a "styles.css" file in the root directory of my app, and I'm referring to that stylesheet in the index.html of my app:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
  </code></pre>
  
  <p>The angular app is successfully compiled:</p>
  
  <pre><code>$ ng serve 
  ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
  [...]
  webpack: Compiled successfully.
  </code></pre>
  
  <p>But when I visit <a href="http://localhost:4200" rel="noreferrer">http://localhost:4200</a> in a Chromium browser, the console shows an error at</p>
  
  <pre><code>GET http://localhost:4200/styles.css 
  </code></pre>
  
  <p>In a Firefox browser, the error is a bit more explicit:</p>
  
  <pre><code>GET 
  http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 15ms]
  The resource from "http://localhost:4200/styles.css" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
  </code></pre>
  
  <p>Both files, index.html and styles.css are located in the root directory of my angular app. 
  I've tried to get <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options" rel="noreferrer">more info about the problem</a> :</p>
  
  <pre><code>nosniff
      Blocks a request if the requested type is
  
          "style" and the MIME type is not "text/css", or
          "script" and the MIME type is not a JavaScript MIME type.
  </code></pre>
  
  <p>But I don't understand why it's bloking the request, since I've specified <code>type="text/css"</code> when referencing the stylesheet.</p>