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!

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

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

Answer 3

Manually including mime.types resolved this for me:

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

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

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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

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

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

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.

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.

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