50

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!

Improve this question
7
  • are the css/js files proxied too? or do they have an http accessible path ? Commented Apr 12, 2015 at 7:59
  • 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 Commented Apr 12, 2015 at 14:31
  • 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. Commented Apr 12, 2015 at 14:37
  • 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? Commented Apr 12, 2015 at 15:59
  • 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 ) Commented Apr 13, 2015 at 14:27

17 Answers 17

Reset to default
51

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

http {
    include mime.types;
    ...

    server {
        listen: 80
        ...
    }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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!
Great. By the way, after doing this, sometimes you may also want to press ctrl + F5 to clean the cache on your browser.
Worked!!..Thanks bro. Was trying from hours to find a solution
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.
21

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;
}
Improve this answer

2 Comments

this worked for me, but it feels it shouldn't be necessary. isn't there a more general approach?
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; } ```
11

Manually including mime.types resolved this for me:

server {
  ...
  include /etc/nginx/mime.types;
  ...
}
Improve this answer

Comments

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

Improve this answer

1 Comment

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

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

Improve this answer

2 Comments

voila not viola !!
X-Content-Type-Options nosniff is for security, disabling it is probably not a viable solution.
2

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;
  }
}
Improve this answer

11 Comments

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"
It's missing a bracket, I'll fix it
Thanks! any idea where this bracket is missing?
after the @proxy, if you click the edited [x] hours ago it iwll show you what exactly I edited in the post.
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
|
2

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

Improve this answer

Comments

2

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.

Improve this answer

Comments

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" />
Improve this answer

Comments

1

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

Improve this answer

1 Comment

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

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.

Improve this answer

Comments

1

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.

Improve this answer

Comments

1

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

Improve this answer

1 Comment

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

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

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

screenshot of the nginx.conf file

Then execute the following:

sudo systemctl reload nginx
Improve this answer

Comments

0

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;
    }
Improve this answer

Comments

0

For me the problem was a combination of several things. Here's the setup and the problem/solution:

setup:

  • LEMP stack
  • ReactJS app built with parcel

problem:

  • I had added --public-url ./ to my build command, which caused the index.html file to have relative links to my javascripts and stylesheets
  • I had set nginx to send possible 404s to index.html via try_files $uri $uri/ /index.html; (this allowed React to handle routing for nonexistent/paths/like/this/
  • I was doing a full refresh on a route that had a nonexistent/path/like/this

So what ended up happening is the server correctly loaded index.html, which had a script included like so: <script type='module' src='whatever.js'></script>, so the browser tried to load whatever.js like so: /nonexistent/path/like/this/whatever.js

Anyway, removing --public-url ./ from my build command fixed the problem. I forget why I even added it in the first place.

Improve this answer

Comments

0

For me, I had include /etc/nginx/mime.types.nginx;, but it was in the http { block. It needed to be in the server { block for things to work.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.