web-dev-qa-db-fra.com

Nginx ne parvient pas à charger les fichiers css

J'ai récemment décidé de passer d'Apache2 à Nginx. J'ai installé Nginx sur mon serveur CentOS et configuré une configuration de base. Lorsque j'ai essayé de charger mon site dans un navigateur (FF/Chrome), j'ai remarqué que le fichier css n'était 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é la configuration de Nginx et tout semble aller pour le mieux:

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

Le type mime des fichiers css est correctement défini dans /etc/nginx/mime.types.

text/css css;

Tout semble être bien configuré mais mes fichiers CSS ne sont toujours pas chargés. Je n'ai aucune explication.

Une autre chose mérite d'être mentionnée. Au départ, j'ai installé Nginx à l'aide de référentiels epel et j'ai une ancienne version: 0.8 ... Il me semblait que mon problème était un bogue dans cette version. J'ai donc désinstallé la version 0.8, ajouté le référentiel nginx à yum, puis installé la dernière version: 1.0. 14 Je pensais que la nouvelle version résoudrait mon problème, mais malheureusement, ce n’est pas le cas, je manque d’idées.

J'apprécie toute 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/default.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
    ..........................................
}
cssnginxmime
62
user337620

J'ai trouvé une solution de contournement sur le Web. J'ai ajouté à /etc/nginx/conf.d/default.conf ce qui suit:

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

Le problème est maintenant qu'une requête vers mon fichier css n'est pas bien redirigée, comme si la racine n'était pas correctement définie. Dans error.log je vois

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

Donc, comme deuxième solution de contournement, j'ai ajouté la racine à chaque emplacement défini. Maintenant, cela fonctionne, mais semble un peu redondant. La racine n'est-elle pas héritée de/emplacement?

30
user337620

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

76
Amnon

style.css est en cours de traitement via fastcgi en raison de votre directive "location /". C'est donc fastcgi qui sert le fichier (nginx > fastcgi > filesystem) et non directement le système de fichiers (nginx > filesystem).

Pour une raison que je n'ai pas encore comprise (je suis sûr qu'il y a une directive quelque part), NGINX applique le type mime text/html à tout ce qui est servi depuis fastcgi, à moins que l’application dorsale n’indique 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;
}

CA devrait etre:

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 en sorte que seulement *.php les fichiers sont demandés à fastcgi. À ce stade, NGINX appliquera le type MIME correct. Si vous avez une réécriture d'URL en cours, vous devez gérer cela avant la directive location (location ~\.php$) pour que l’extension correcte soit dérivée et correctement acheminée vers fastcgi.

Assurez-vous de vérifier cet article concerne des considérations de sécurité supplémentaires à l'aide de try_files . Compte tenu des implications en termes de sécurité, j’estime qu’il s’agit d’une fonctionnalité et non d’un bogue.

19
zamnuts

J'ai rencontré ce problème aussi. Cela m'a dérouté jusqu'à ce que je réalise ce qui n'allait pas:

Tu as ceci:

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

Tu veux ça:

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

il semble y avoir soit un bogue dans nginx, soit une déficience dans la documentation (il pourrait s'agir du comportement souhaité, mais il est étrange)

10
Jonathan Vanasco

J'ai suivi quelques conseils tirés des réponses restantes et découvert que ces actions étranges avaient aidé (du moins dans mon cas).

1) J'ai ajouté au serveur bloquer ce qui suit:

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

J'ai rechargé nginx et je l'ai trouvé dans error.log:

2015/06/18 11:32:29 [erreur] 3430 # 3430: * 169 ouvert () "/etc/nginx/html/css/mysite.css" a échoué (2: aucun fichier ou répertoire de ce type)

2) J'ai supprimé les lignes, rechargé nginx et obtenu le travail de css. Je ne peux pas expliquer ce qui est arrivé parce que mon fichier de configuration est devenu comme avant.

Mon cas était propre xubuntu 14.04 sur VirtualBox, nginx/1.9.2, une rangée 127.51.1.1 mysite dans/etc/hosts et assez simple /etc/nginx/nginx.conf avec un bloc 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/;
        }
    }
}
1
unVerum

J'ai eu le même problème sous Windows. Je l'ai résolu en ajoutant: inclure mime.types; sous http { dans mon fichier nginx.conf. Ensuite, cela ne fonctionnait toujours pas .. alors j’ai regardé le fichier error.log et j’ai remarqué qu’il essayait de charger les fichiers .css et javascript à partir du chemin du fichier mais avec un dossier/http entre . Ex: mon fichier .css se trouvait dans: "C:\Utilisateurs\pc\Documents\Serveur/lecteur-web/css/index.css" et il prenait à partir de: "C:\Utilisateurs\pc\Documents\nginx -server/html/player-web/css/index.css "J'ai donc changé mon dossier player-web dans un dossier html et cela a fonctionné;)

0
nachoreimat

vous devez actualiser complètement le site dans votre navigateur, par exemple utilisez ctrl + f5 pour actualiser et éviter d’obtenir des fichiers en cache avec des en-têtes incorrects.

0
Masih Jahangiri

En fait, j'ai pris mon temps pour parcourir toutes les réponses ci-dessus sur cette page, mais en vain. Il m'est arrivé de changer le propriétaire et les autorisations du répertoire et des sous-répertoires à l'aide de la commande suivante. J'ai changé le propriétaire du répertoire du projet Web dans /usr/share/nginx/html à l'utilisateur root à l'aide de:

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

Et finalement changé les permissions de ce répertoire et de ses sous-répertoires en utilisant:

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

NOTE : en cas de refus, vous pouvez utiliser Sudo

0
Young Emil

J'avais le même problème et rien de ce qui précède n'a fait de différence pour moi. Ce qui a fonctionné, c'est d'avoir mon emplacement php au-dessus de tout autre 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 /
}
0
Alex M