Nginx failing to load CSS and JS files (MIME type

Question

I'm getting the following errors on my website:

Error: There are multiple templates named 'velvet'. Each template needs a unique name. 1b1a247fc034d5089f331ec9540138ff6afd5f39.js:75:306
The stylesheet http://webmill.eu/css/bootstrap.min.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/font-awesome.min.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/velvet.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/custom.css was not loaded because its MIME type, "text/html", is not "text/css".   

After extensive research on the 4 CSS stylesheets failing to load I followed some leads and attempted to fix it by making changes in my nginx file ( /

etc/nginx/sites-available/webmill

) by inserting "include /etc/nginx/mime.types;" under location / { :

# HTTP
server {
    listen 80 default_server; # if this is not a default server, remove "default_server"
    listen [::]:80 default_server ipv6only=on;

    root /usr/share/nginx/html; # root is irrelevant
    index index.html index.htm; # this is also irrelevant

    server_name webmill.eu; # the domain on which we want to host the application. Since we set "default_server" previously, nginx will answer all hosts anyway.


    # If your application is not compatible with IE <= 10, this will redirect visitors to a page advising a browser update
    # This works because IE 11 does not present itself as MSIE anymore
      if ($http_user_agent ~ "MSIE" ) {
        return 303 https://browser-update.org/update.html;
    }

    # pass all requests to Meteor
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade; # allow websockets
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header X-Forwarded-For $remote_addr; # preserve client IP
        include       /etc/nginx/mime.types;

        # this setting allows the browser to cache the application in a way compatible with Meteor
        # on every applicaiton update the name of CSS and JS file is different, so they can be cache infinitely (here: 30 days)
        # the root path (/) MUST NOT be cached
        if ($uri != '/') {
            expires 30d;
        }
    }
}

The /etc/nginx/mime.types file was all correct and properly called in in

/etc/nginx/nginx.conf

    user www-data;
worker_processes 4;
pid /run/nginx.pid;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # nginx-naxsi config ##
        # Uncomment it if you installed nginx-naxsi
        ##

        #include /etc/nginx/naxsi_core.rules;

        ##
        # nginx-passenger config
        ##
        # Uncomment it if you installed nginx-passenger
        ##

        #passenger_root /usr;
        #passenger_ruby /usr/bin/ruby;

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

I must be doing something wrong because it still isn't working. Should I also include "root /usr/share/nginx/html;" in the location section of /etc/nginx/sites-available/webmill ?

Any suggestions are welcome and thanks in advance for any help!

Answer 1

Well, after all failed attempts, i've managed to solve this problem by removing link type="text/css" from my code, and leave css as this:

<link rel="stylesheet" href="/css/style.css" />

Answer 2

I was getting a similar error with Angular 5 - typescript and Nginx server.

error in console

The script from “https://my-server.com/organizations/inline.15670a33298d01750cb3.bundle.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type
SyntaxError: unexpected token: numeric literal

The Javascript files where also downloaded with the content of the index.html. Plus, when I was in page "https://my-server.com/organizations" and refreshing the browser, I was sent to the "https://my-server.com/organizations/organizations" url.

The solution for me was just to change the base href from

<base href="">   <-- wrong

to

<base href="/">   <-- right

That was it, no changes in nginx.conf or anything else.

Answer 3

Try adding this to your /etc/nginx/conf.d/default.conf

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}