Nginx failing to load CSS and JS files (MIME type error)?

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!

Launcher

are the css/js files proxied too? or do they have an http accessible path ? – Decorative

thanks for your interest! no they are not proxied and don't have an htt accessible path from what I can see (ref. first post from /etc/nginx/sites-available/webmill) unless I am looking in the wrong place... I am not an expert in this – Lobeline

see why i'm asking, you say root is irrelevant though you could make it so, if you change that root to the path where the assets exist, nginx can serve them directly ( with the right headers but you need a tiny bit change in your config ) without asking the webmill server to do so. – Decorative

thanks v much! so do I just update the line in question to follow the path to my file or do I create a location section? would it be something like /home/ines/development/webmill/app/client/js for javascript and simmilarly for css? – Lobeline

well you could change the root to /home/ines/development/webmill/app/client/js for js files and /home/ines/development/webmill/app/client/css for css files, and then tell nginx to find the files there, ( this is assuming that the urls are like example.com/css/file.css ) – Decorative

thanks! I did a bunch of fixes in my /etc/nginx/nginx.conf file including adding root to the answer listed below which had worked for some people but nothing worked. I also ended up noticing that no matter which of those CSS URLs (e.g. webmill.eu/css/font-awesome.min.css or even webmill.eu/css/nowaythisisarealurl) I click/type they display the full website's page leading to think that all requests are being taken over by the (Meteor) application and the CSS files are not even passing through Nginx, at least when called directly by URL. – Lobeline

yea because you haven't told nginx to try and serve those files first, i'm gonna add an answer as soon as i have enough time. – Decorative

Answer 1

for anyone else facing this issues, I had this problem and had removed my mime.types include

http {
    include mime.types;
    ...

    server {
        listen: 80
        ...
    }

Hjerpe

In my case I was writing a config file for NGINX from scratch to deploy in Kubernetes. Was seeing text/plain returned for assets (scripts, stylesheets) and after adding include mime.types; into the http section everything worked. Thanks! – Penney

Worked for me as well in kubernetes nginx. Thanks! – Davedaveda

Great. By the way, after doing this, sometimes you may also want to press ctrl + F5 to clean the cache on your browser. – Inherit

Worked!!..Thanks bro. Was trying from hours to find a solution – Putumayo

This should be the accepted answer, also take a look at nginx full example configuration if you doing one from scratch nginx.com/resources/wiki/start/topics/examples/full it also shows all the mime types supported at the bottom. – Clisthenes

Answer 2

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;
}

Allistir

this worked for me, but it feels it shouldn't be necessary. isn't there a more general approach? – Wenona

Sometimes when you have files like xxx.yyyy.js you'll have same issue so I've made general approach with regex: ``` location ~ .*(\.css)$ { add_header Content-Type text/css; } location ~ .*(\.js)$ { add_header Content-Type application/x-javascript; } ``` – Unfamiliar

Answer 3

Manually including mime.types resolved this for me:

server {
  ...
  include /etc/nginx/mime.types;
  ...
}

Farinaceous

Answer 4

Angular 8 Application => NGINX

Eventually after some digging, removing one option at a time, I managed to trace the option that was causing the "MIME types" errors I was getting in the console.

I commented it out and voila the content displayed fine.

# This option causes issues with Angular 8 served applications
# add_header X-Content-Type-Options nosniff;

# Include MIME Types
include /etc/nginx/mime.types

Hope it helps someone

Reproductive

voila not viola !! – Motive

X-Content-Type-Options nosniff is for security, disabling it is probably not a viable solution. – Tijuanatike

Answer 5

If you are using ingress rewrites in ingress-nginx, this helped:

i changed my config from this :

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  rules:
    - http:
        paths:
          - path: /
            backend:
              serviceName: client-cluster-ip-service
              servicePort: 3000
          - path: /api(/|$)(.*)
            backend:
              serviceName: server-cluster-ip-service
              servicePort: 5000

to this :

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  rules:
    - http:
        paths:
          - path: /?(.*)
            backend:
              serviceName: client-cluster-ip-service
              servicePort: 3000
          - path: /api/?(.*)
            backend:
              serviceName: server-cluster-ip-service
              servicePort: 5000

From: https://github.com/kubernetes/ingress-nginx/issues/5265#issuecomment-612680524

Sparker

I tried it and still now able to get it working on Minikube. Ingress Controller version: registry.k8s.io/ingress-nginx/controller:v1.8.1. When I hit the NodePort it's working fine but via the ingress controller it's still returning "TypeError: 'text/html' is not a valid JavaScript MIME type." Any help is appreciated. – Age

Answer 6

I left out the obvious parts from the config to reduce duplication, this is just the base and you'll need to add the other config from your config, like the listen and the caching part.

server {
  server_name webmill.eu;
  location @proxy {
    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;
  }
  location /css {
    root /home/ines/development/webmill/app/client/css;
     # try finding the file first, if it's not found we fall
     # back to the meteor app
    try_files $uri @proxy;
  }
  location /js {
    root /home/ines/development/webmill/app/client/js;
     # try finding the file first, if it's not found we fall
     # back to the meteor app
    try_files $uri @proxy;
  }
  location / {
    # I know first condition will always fail but i can't do
    # try files with only 1 option;
    try_files $uri @proxy;
  }
}

Decorative

Many thanks for this! I made the changes yet haven't cracked it just yet. currently getting a 500 internal server error to which the error log says 2015/04/14 08:46:06 [error] 20225#0: *31868 could not find named location "@proxy", client: 81.164.141.218, server: webmill.eu, request: "GET / HTTP/1.1", host: "webmill.eu" – Lobeline

It's missing a bracket, I'll fix it – Decorative

Thanks! any idea where this bracket is missing? – Lobeline

after the @proxy, if you click the edited [x] hours ago it iwll show you what exactly I edited in the post. – Decorative

thanks again! your fix got rid of the 500 internal error and at the moment I'm still trying to work on it passing the css and the js – Lobeline

are/is there any other possibility(ies)? I have pretty much through all the possible solutions I could find and it still isn't cutting it – Lobeline

could you take an image url, and do a curl -I [image_url] (capital i) , this will show you the headers for the response. – Decorative

Thanks, but I'm unsure as to what to do with it. So far I've kept on experimenting. My latest try included: location ~* "^/[a-z0-9]{40}\.(css)$" { root /home/ines/Development/webmill/app/client/css; access_log off; expires max; } location ~* "^/[a-z0-9]{40}\.(js)$" { root /home/ines/Development/webmill/app/client/js; access_log off; expires max; } still without any success – Lobeline

That's kinda too specific, it's better to try a more generic rule, try something like location ~* \. css$ and add the root and try_files inside it, if it works we can try to limit the location block regex from there. – Decorative

Got back to the config you suggested with some additions and I seem to have got ridden of the mime type errors (nothing declared in the console and no errors in nginx error log). so now I only have an uncaught error (which has been there since the start) stating: Uncaught Error: There are multiple templates named 'velvet' . Each template needs a unique name. – Lobeline

that's not an nginx error, this is now in the meteor level, check your app. – Decorative

Answer 7

I changed the owner of the project to root using:

chown root /usr/share/nginx/html/mywebprojectdir/*

and changed permissions using:

chmod 755 /usr/share/nginx/html/mywebprojectdir/*

You can look at my answer here

Nathan

Answer 8

Tried 1.verifying the permissions 2.checking the try_files .

At the end, my layout was returned to normal by adding "include /etc/nginx/mime.types" into "http" section of "nginx.conf" file

"http{
 include /etc/nginx/mime.types;
 sendfile on;
 server {
    listen 443 ssl;
 ....." 

Otherwise, the browser was complaining about css files interpreted as text instead of stylesheets.

Perfect

Answer 9

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" />

Damara

Answer 10

Check your nginx.conf! do you have config like this:

include /usr/local/nginx/conf/mime.types;

I fixed this problem by adding this sentence

Counterblast

Worked for me with include /etc/nginx/mime.types; – Fiora

Answer 11

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.

Damoiselle

Answer 12

For me it worked, when i viewed the sources of my files that i got as response with nginx. apparently iam getting the same html file for all the requests the website is sending. so removed the try_files directive and it solved the issue.

Rolanda

Answer 13

it worked for me by removing this line "try_files $uri$args $uri$args/ /index.html;" from the reverse proxy configuration. However, I still keep the same line in the nginx conf in my app server

Slaveholder

after 2hours of debugging you saved me. I moved try_files from reverse proxy to my frontends nginx conf file. – Joan

Answer 14

In the file /etc/nginx/nginx.conf add the line:

include mime.types;
types {
    application/javascript js mjs;
}

Then execute the following:

sudo systemctl reload nginx

Dobrinsky

Answer 15

I had to change this

location / {
         try_files $uri $uri/ /index.php;
    }

to this

    location / {
      # First attempt to serve request as file, then
      # as directory, then fall back to displaying a 404.
      try_files $uri $uri/ /index.php?$args;
    }

Gyrostabilizer