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. 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 j'ai 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 bien: 

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

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

text/css css;

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

Une autre chose à mentionner. Initialement, j'ai installé Nginx en utilisant des dépôts epel et j'ai eu une ancienne version: 0.8... Il m'est apparu que mon problème était un bug dans cette version, donc j'ai 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, alors je suis à court de idée.

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

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
    ..........................................
}
56
demandé sur h7r 2012-04-09 19:10:42

8 réponses

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

61
répondu Amnon 2012-08-09 01:11:03

J'ai trouvé une solution de contournement sur le web. J'ai ajouté à /etc/nginx/conf.d/par défaut.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 root n'était pas correctement défini. 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 de contournement, j'ai ajouté la racine à chaque emplacement défini. Maintenant, il fonctionne, mais semble un peu redondant. La racine n'est-elle pas héritée de / location ?

26
répondu user337620 2012-04-11 18:14:55

style.css est en train d'être traité via fastcgi en raison de votre directive "location/". C'est donc fastcgi qui sert le fichier (nginx > fastcgi > filesystem), et non le système de fichiers directement (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 à partir de fastcgi, sauf si 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;
}

Cette modification garantit que seuls les fichiers *.php sont demandés à fastcgi. À ce stade, NGINX appliquera le type MIME correct. Si vous avez une réécriture D'URL, vous devez gérer cette avant la directive location (location ~\.php$) afin que l'extension correcte soit dérivée et correctement routée vers fastcgi.

Assurez-vous de consulter cet article concernant des considérations de sécurité supplémentaires en utilisant try_files. Compte tenu des implications en matière de sécurité, je considère c'est une fonctionnalité et non un bug.

16
répondu zamnuts 2014-04-25 00:26:28

J'ai rencontré ce problème aussi. Cela m'a confus jusqu'à ce que je réalise ce qui ne va pas:

Vous avez ceci:

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

Vous voulez ceci:

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

Il semble y avoir un bug dans nginx ou une déficience dans les documents (cela pourrait être le comportement prévu, mais c'est étrange)

6
répondu Jonathan Vanasco 2014-01-04 20:29:55

J'ai suivi quelques conseils des autres réponses et j'ai découvert que ces actions étranges aidaient (du moins dans mon cas).

1) j'ai ajouté au bloc serveur ce qui suit: 

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

J'ai rechargé nginx et je l'ai eu par erreur.journal:

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

2) j'ai supprimé les lignes, rechargé nginx et obtenu CSS de travail. Je ne peux pas expliquer ce qui s'est passé parce que mon fichier conf est devenu tel 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 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
répondu unVerum 2015-06-18 11:13:56

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é l'erreur .log fichier et j'ai remarqué qu'il essayait de charger le .fichiers CSS et javascript du chemin du fichier mais avec un dossier / http entre. Ex: mon .css était dans : "C:\Users\pc\Documents\nginx-server/player-web/css/index.CSS" et c'était le prendre à partir de: "C:\Users\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
répondu nachoreimat 2017-04-05 13:45:04

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

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

Et enfin changé les autorisations de ce répertoire et sous-répertoires en utilisant:

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

NOTE: en cas de refus , vous pouvez utiliser sudo

0
répondu Young Emil 2018-03-18 13:48:46

Ajoutez ceci à votre fichier ngnix 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'";
-2
répondu touzani 2016-06-22 15:50:31