Nginx ne parvient pas à charger les fichiers css

J'ai récemment décidé de changer de Apache2 de Nginx. J'ai installé Nginx sur mon serveur CentOS et l'installation d'une configuration de base.
Quand j'ai essayé de charger mon site dans le navigateur (FF/Chrome), j'ai remarqué que le fichier css n'est pas chargé. J'ai vérifié la console d'erreur et vu ce message:

Error: The stylesheet http://example.com/style.css was not loaded because its MIME type, "text/html", is not "text/css".

J'ai vérifié Nginx configuration et tout semble aller pour le mieux:

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

Le type mime pour les fichiers css est correctement définie dans /etc/nginx/mime.les types.

text/css css;

Tout semble bien configuré, mais mes fichiers css sont pas encore chargés. Je n'ai pas d'explication.

Une autre chose à noter. Au départ, j'ai installé Nginx à l'aide de dépôts epel et j'ai eu une vieille version: 0.8... Il m'a semblé que mon problème était dû à un bug dans cette version, alors je l'ai désinstallé version 0.8, a ajouté nginx référentiel yum, puis installé la dernière version: 1.0.14. Je pensais que la nouvelle version va résoudre mon problème, mais malheureusement il n'a pas donc je suis à court d'idées.

J'apprécie toute l'aide.

Fichiers de Configuration:

/etc/nginx/nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

/etc/nginx/conf.d/par défaut.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;

    location / {
         root    /usr/share/nginx/html;
         index  index.html index.htm index.php;
         fastcgi_pass   127.0.0.1:9000;
         fastcgi_index  index.php;
         fastcgi_param  SCRIPT_FILENAME  /usr/share/nginx/html$fastcgi_script_name;
         include        fastcgi_params;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

/etc/nginx/mime.types

types {
    text/html                             html htm shtml;
    text/css                              css;
    text/xml                              xml;
    image/gif                             gif;
    image/jpeg                            jpeg jpg;
    application/x-javascript              js;
    application/atom+xml                  atom;
    application/rss+xml                   rss;
    ..........................................
    other types here
    ..........................................
}
  • veuillez coller dans votre config code. habituellement, vous avez conduit d'autres à d'autres types de bien, et son saut au-dessus de votre public des fichiers de la partie qui provoque des actifs comme le css et les images de retourner des erreurs 404, ou dans votre cas, type mime erreurs
  • Pour mon cas, votre question est devenue une réponse. Des acclamations.
InformationsquelleAutor user337620 | 2012-04-09
  1. 79

    Mettre le include /etc/nginx/mime.types; sous location /{ au lieu de sous http { résolu le problème pour moi.

    • notez aussi que si vous êtes à partir de la config à partir de rien - sauf pour les types mime peut-être - include mime.types; fait son travail, depuis l' (au moins sur windows, nginx 1.5.2) c'est juste par rapport à d'autres fichiers de configuration.
    • notez aussi que vous devriez pleinement à actualiser le site dans votre navigateur, par exemple à l'aide de ctrl+f5 pour actualiser afin d'éviter la mise en cache de fichiers avec les mauvaises têtes.
    • C'est vraiment fantastique.
    • Cela fonctionne, mais pourquoi? dans http doit être assez! en fait, c'était comme ça depuis plus d'un an sur une boîte de dev et aujourd'hui, il a juste arrêté de travailler sans faire aucune modification (pas de nginx mise à jour ou même redémarrer).
    • u monsieur, a sauvé ma journée
    • Cela a sauvé mon problème aussi, mais je ne peux pas faire tout le sens de l'il. Mon problème était que mon fichier css est partiellement chargé. Je suis à l'aide de webpack peut-être que c'est la cause du problème. Ne sais pour sûr. Merci quand même sauvé ma journée aussi 🙂

    InformationsquelleAutor Amnon
  2. 30

    J'ai trouvé une solution sur le web. J'ai ajouté à /etc/nginx/conf.d/par défaut.conf suivantes:

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

    Le problème aujourd'hui est qu'une demande à mon fichier css n'est pas redirigé bien, comme si la racine n'est pas correctement réglé.
    Dans l'erreur.journal je vois

    2012/04/11 14:01:23 [erreur] 7260#0: *2 open() "/etc/nginx//html/style.css"

    Donc comme une deuxième solution, j'ai ajouté de la racine à chaque emplacement défini.
    Maintenant, il fonctionne, mais semble un peu redondant. N'est pas la racine de héritées de /emplacement ?

    • Est-ce un nginx bug? C'est la seule façon que je pouvais le faire fonctionner. Par la façon dont je suis sur Arch Linux, nginx 1.4.1-3.
    • pas un bug, l'on a accepté la réponse est un travail autour de, pour une solution adéquate voir ma réponse stackoverflow.com/a/23282158/1481489
    InformationsquelleAutor user337620
  3. 19

    style.css est effectivement en cours de processus via fastcgi en raison de votre emplacement " /" de la directive. C'est donc fastcgi qui est de servir le fichier (nginx > fastcgi > filesystem), et non pas le système de fichiers directement (nginx > filesystem).

    Pour une raison que je n'ai pas encore trouver (je suis sûr qu'il y a une directive quelque part), NGINX applique le type mime text/html pour tout ce qui est servi à partir de fastcgi, à moins que l'application backend dit explicitement le contraire.

    Le coupable est-ce bloc de configuration spécifiquement:

    location / {
     root    /usr/share/nginx/html;
     index  index.html index.htm index.php;
     fastcgi_pass   127.0.0.1:9000;
     fastcgi_index  index.php;
     fastcgi_param  SCRIPT_FILENAME  /usr/share/nginx/html$fastcgi_script_name;
     include        fastcgi_params;
}

    Il devrait être:

    location ~ \.php$ { # this line
     root    /usr/share/nginx/html;
     index  index.html index.htm index.php;
     fastcgi_split_path_info ^(.+\.php)(/.+)$; #this line
     fastcgi_pass   127.0.0.1:9000;
     fastcgi_index  index.php;
     fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name; # update this too
     include        fastcgi_params;
}

    Ce changement fait que seul *.php fichiers sont priés de fastcgi. À ce stade, NGINX va appliquer le bon type MIME. Si vous avez des URL rewriting qui se passe, vous devez gérer cette avant l'emplacement de la directive ( location ~\.php$ ), de sorte que l'extension est dérivé et correctement acheminés à fastcgi.

    Assurez-vous de vérifier cet article au sujet d'autres considérations de sécurité à l'aide de try_files. Étant donné les implications en matière de sécurité, je considère cela comme une fonction et non un bug.

    • ce doit être la accepté de répondre, voir aussi: forum.nginx.org/read.php?2,155222,155261#msg-155261
    • Il semble que c'est toujours un problème, de plus de 4 ans après la question d'origine. Comment fonctionne la configuration correcte à regarder comme si vous n'servir du contenu statique, c'est à dire n en PHP?
    InformationsquelleAutor zamnuts
  4. 10

    Je suis tombé sur cette question aussi. Il me troublait jusqu'à ce que j'ai compris ce qui n'allait pas:

    Vous avez ceci:

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

    Vous voulez que cela:

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

    il semble être un bug dans nginx ou une lacune dans la documentation (ce pourrait être le comportement voulu, mais c'est bizarre)

    • cela ne résout pas le problème sur windows avec nginx/1.6.0
    InformationsquelleAutor Jonathan Vanasco
  5. 1

    J'ai suivi quelques conseils de le reste des réponses, et a découvert que ces drôles d'actions ont contribué à (au moins dans mon cas).

    1) j'ai ajouté à bloc de serveur suivants:

    location ~ \.css {
 add_header Content-Type text/css;
}

    J'ai rechargé nginx et a obtenu ce dans l'erreur.journal:

    2015/06/18 11:32:29 [erreur] 3430#3430: *169 open() "/etc/nginx/html/css/monsite.css" échec (2: Aucun fichier ou répertoire)

    2) j'ai supprimé les lignes, reloaded nginx et obtenu de travail css.
    Je ne peux pas expliquer ce qui s'est vraiment passé car mon fichier conf est devenu comme avant.

    Mon cas était propre xubuntu 14.04 sur VirtualBox, nginx/1.9.2, une ligne 127.51.1.1 mysite dans /etc/hosts et assez simple /etc/nginx/nginx.conf avec un bloc de serveur:

    user nginx;
worker_processes 1;

error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include /etc/nginx/mime.types;

    server {
        listen 80;
        server_name mysite;

        location / {
            root /home/testuser/dev/mysite/;
        }
    }
}
    InformationsquelleAutor unVerum
  6. 1

    J'ai aussi face à ce problème, j'ai essayé beaucoup de solutions, mais aucune n'a vraiment fonctionné pour moi

    Voici comment je l'ai résolu;

    Un. Subvention de la propriété du domaine du répertoire racine du document (dire que mon répertoire racine est/var/www/nginx-demo) à la Nginx utilisateur (www-data) afin d'éviter les problèmes d'autorisation:

    sudo chown -R www-data: /var/www/nginx-demo

    B. Confirmer que votre hôte virtuel bloc de serveur conforme à la présente norme (dire que je suis en utilisant localhost que mon nom et ma racine que /var/www/nginx-demo/website)

    server {
   listen 80;
   listen [::]:80;

   server_name localhost;

   root /var/www/nginx-demo/website;
   index index.html;

   location / {
            try_files $uri $uri/ =404;
   }
}

    C. le Test de configuration de Nginx pour la syntaxe correcte:

    sudo nginx -t

    Si il n'y a pas d'erreurs dans la syntaxe de configuration de la sortie ressemble à ceci:

    nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

    D. Redémarrer le service Nginx pour que les modifications prennent effet:

    sudo systemctl restart nginx

    E. Dur d'actualisation de votre site web dans votre navigateur pour éviter les fichiers mis en cache avec incorrecte des en-têtes à l'aide des touches du clavier Ctrl + F5 ou Ctrl + Fn + F5.

    C'est tout.

    J'espère que cette aide.

    InformationsquelleAutor Promise Preston
  7. 0

    J'ai eu le même problème dans Windows.
    Je l'ai résolu en ajoutant: inclure mime.types; sous http{ dans mon nginx.fichier conf.
    Ensuite, il ne fonctionne toujours pas.. j'ai donc regardé la erreur.journal fichier et j'ai remarqué qu'il était en train de charger la .les fichiers css et javascript à partir du chemin d'accès au fichier, mais avec un /http dossier entre. Ex:
    mon .css est dans : "C:\Users\pc\Documents\nginx-server/player-web/css/index.css"
    et c'était de le prendre à partir de: "C:\Users\pc\Documents\nginx-server/html/joueur-web/css/index.css"
    J'ai donc changé mon lecteur-dossier web à l'intérieur d'un dossier html et cela a fonctionné 😉

    InformationsquelleAutor nachoreimat
  8. 0

    J'ai pris mon temps est passé par toutes les réponses ci-dessus sur cette page, mais en vain. J'ai juste passé pour changer le propriétaire et les permissions du répertoire et sous-répertoires à l'aide de la commande suivante.J'ai changé le propriétaire du projet web directory dans /usr/share/nginx/html à la root utilisateur à l'aide de:

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

    Et enfin changé les permissions du répertoire et sous-répertoires à l'aide de:

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

    NOTE: en cas de refus , vous pouvez utiliser sudo

    InformationsquelleAutor Young Emil
  9. 0

    J'ai eu le même problème et rien de ce qui fait toute la différence pour moi ce n'travail était d'avoir mon emplacement php au-dessus de tous les autres blocs d'emplacement.

    location ~ [^/]\.php(/|$) {
fastcgi_split_path_info  ^(.+\.php)(/.+)$;
fastcgi_index            index.php;
fastcgi_pass             unix:/var/run/php/php7.3-fpm.sock;
include                  fastcgi_params;
fastcgi_param   PATH_INFO       $fastcgi_path_info;
fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
** The below is specifically for moodle **
location /dataroot/ {
internal;
alias <full_moodledata_path>; # ensure the path ends with /
}
    InformationsquelleAutor Alex M
  10. 0

    1. Dans votre nginx.fichier conf, ajouter le mime.types de votre http corps comme:

      http {
    include /etc/nginx/mime.types;
    include /etc/nginx/conf.d/*.conf;
}

    2. Maintenant, allez dans le terminal et exécutez la commande suivante pour recharger le serveur:

      sudo nginx -s reload

    3. Ouvrez votre navigateur web et de faire un hard recharger: clic Droit sur le bouton de rechargement et sélectionnez dur de le recharger. Sur Chrome, vous pouvez le faire Ctrl+Maj+R

    InformationsquelleAutor GilbertS
  11. -3

    ajouter à votre ngnix fichier conf 

    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://assets.zendesk.com; font-src 'self' https://themes.googleusercontent.com; frame-src https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";
    InformationsquelleAutor touzani