web-dev-qa-db-fra.com

Nginx n'a pas réussi à charger les fichiers CSS et JS (erreur de type MIME)?

Je reçois les erreurs suivantes sur mon site Web:

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

Après des recherches approfondies sur les 4 feuilles de style CSS qui n'ont pas pu être chargées, j'ai suivi quelques pistes et tenté de le corriger en apportant des modifications dans mon fichier nginx (/

etc/nginx/sites-available/webmill

) en insérant "include /etc/nginx/mime.types;" sous emplacement/{:

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

Le fichier / etc/nginx/mime.types était tout correct et correctement appelé dans

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

Je dois faire quelque chose de mal car cela ne fonctionne toujours pas. Dois-je également inclure "root/usr/share/nginx/html;" dans la section location de / etc/nginx/sites-available/webmill?

Toutes les suggestions sont les bienvenues et merci d'avance pour toute aide!

cssnginxmeteormime-types
10
Inês B

Essayez d'ajouter ceci à votre /etc/nginx/conf.d/default.conf

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

pour toute autre personne confrontée à ces problèmes, j'ai eu ce problème et j'ai supprimé mon mime.

http {
    include mime.types;
    ...

    server {
        listen: 80
        ...
    }
3
Daniel Peterson

J'ai changé le propriétaire du projet en root en utilisant:

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

et modifié les autorisations en utilisant:

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

Vous pouvez regarder ma réponse ici

2
Young Emil

Eh bien, après toutes les tentatives infructueuses, j'ai réussi à résoudre ce problème en supprimant link type = "text/css" de mon code, et laissez css comme ceci:

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

Vérifiez votre nginx.conf! avez-vous une configuration comme celle-ci:

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

J'ai résolu ce problème en ajoutant cette phrase

1
user3598155

Incluant manuellement mime.types a résolu ce problème pour moi:

server {
  ...
  include /etc/nginx/mime.types;
  ...
}
1
Charney Kaye

J'ai omis les parties évidentes de la configuration pour réduire la duplication, ce n'est que la base et vous devrez ajouter l'autre configuration de votre configuration, comme l'écoute et la mise en cache.

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;
  }
}
1
Mohammad AbuShady

J'obtenais une erreur similaire avec Angular 5 - Serveur TypeScript et Nginx.

erreur dans la 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

Les fichiers Javascript ont également été téléchargés avec le contenu du fichier index.html. De plus, lorsque j'étais sur la page " https://my-server.com/organisations " et que je rafraîchissais le navigateur, j'étais envoyé sur le " https: // mon-serveur. com/organisations/organisations "url.

La solution pour moi était juste de changer le href de base de

<base href="">   <-- wrong

à

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

C'était tout, aucun changement dans nginx.conf ou quoi que ce soit d'autre.

1
Andreas Panagiotidis

Essayé 1. vérification des autorisations 2. vérification des try_files.

À la fin, ma mise en page est revenue à la normale en ajoutant "include /etc/nginx/mime.types" dans la section "http" du fichier "nginx.conf"

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

Sinon, le navigateur se plaignait des fichiers css interprétés comme du texte au lieu de feuilles de style.

1
Di V

Application Angular 8 => NGINX

Finalement, après quelques recherches, en supprimant une option à la fois, j'ai réussi à tracer l'option qui provoquait les erreurs de types MIME que j'obtenais dans la console.

Je l'ai commenté et le contenu de l'alto s'est bien affiché.

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

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

J'espère que cela aide quelqu'un

0
englishPete