Search code examples
htmlcssnode.jsubuntuphpstorm

CSS not loading anyhow

I am working over the node server using PhpStorm in Ubuntu. Everything works fine except the CSS part. It is not loading anyhow. I manually opened the site but the CSS part was not there. I tried to open it over Django server using PyCharm but no use.

I created a sample site with the external CSS link but there also it was not loading. I just can't figure out where the issue is.

I am using HTML5 boilerplate with default pages given in PhpStorm.

File hierarchy is as follows:

Website
 -css
   -main.css
   -normalize.css
   -custom.css
 -index.html

CSS Link

 <head>
<meta charset="utf-8">
<title>WebAPP</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!--Local CSS-->
  <link href="css/custom.css" rel="stylesheet" type="text/css">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/main.css" rel="stylesheet" type="text/css">

<meta property="og:title" content>
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<meta name="theme-color" content="#fafafa">

</head>

Here is the error from browser's network panel

The resource at “<URL>” was blocked because content blocking is enabled. 2
The resource from “http://127.0.0.1:8000/WebApp/js/main.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/normalize.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/main.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/js/vendor/modernizr-3.11.2.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
Loading failed for the <script> with source “http://127.0.0.1:8000/WebApp/js/vendor/modernizr-3.11.2.min.js”. WebApp:35:1
The resource from “http://127.0.0.1:8000/WebApp/js/plugins.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
Loading failed for the <script> with source “http://127.0.0.1:8000/WebApp/js/plugins.js”. WebApp:36:1
GEThttp://127.0.0.1:8000/WebApp/js/main.js
[HTTP/1.1 404 Not Found 6ms]

The resource from “http://127.0.0.1:8000/WebApp/js/main.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
Loading failed for the <script> with source “http://127.0.0.1:8000/WebApp/js/main.js”. WebApp:37:1
GEThttp://127.0.0.1:8000/WebApp/icon.png
[HTTP/1.1 404 Not Found 0ms]

GEThttp://127.0.0.1:8000/favicon.ico
[HTTP/1.1 404 Not Found 0ms]

The resource from “http://127.0.0.1:8000/WebApp/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/normalize.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
WebApp
The resource from “http://127.0.0.1:8000/WebApp/css/main.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Solution

  • “http://127.0.0.1:8000/WebApp/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

    You have the answer right there: your web server sends text/html in Content-Type response header instead of expected text/css and X-Content-Type-Options: nosniff header disallows browser to auto-fix that (which is a good thing, as it prevents vulnerabilities: better detect and fix it now in dev environment than have possible issues later in production).

    And you have exactly the same issue with .js files.

    You need to fix your web server config. It must be node.js powered code that serves those files (as far I understand from your description).