Nginx kann keine CSS-Dateien laden


79

Ich habe kürzlich beschlossen, von Apache2 zu Nginx zu wechseln. Ich habe Nginx auf meinem CentOS-Server installiert und eine Grundkonfiguration eingerichtet. Als ich versuchte, meine Website im Browser (FF / Chrome) zu laden, stellte ich fest, dass die CSS-Datei nicht geladen ist. Ich habe die Fehlerkonsole überprüft und folgende Meldung angezeigt:

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

Ich habe die Nginx-Konfiguration überprüft und alles scheint in Ordnung zu sein:

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

Der MIME-Typ für CSS-Dateien ist in /etc/nginx/mime.types korrekt festgelegt.

text/css css;

Alles scheint gut konfiguriert zu sein, aber meine CSS-Dateien sind immer noch nicht geladen. Ich habe keine Erklärung.

Eine andere erwähnenswerte Sache. Anfangs habe ich Nginx mit Epel-Repositories installiert und eine alte Version erhalten: 0.8 ... Es schien mir, dass mein Problem ein Fehler in dieser Version war, also habe ich die Version 0.8 deinstalliert, das Nginx-Repository zu yum hinzugefügt und dann die neueste Version: 1.0 installiert. 14. Ich dachte, die neue Version wird mein Problem lösen, aber leider nicht, so dass mir die Ideen ausgehen.

Ich freue mich über jede Hilfe.

Konfigurationsdateien:

/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
    ..........................................
}

Bitte fügen Sie Ihren Konfigurationscode ein. Normalerweise haben Sie mit anderen Typen gut umgegangen, und das Überspringen Ihres Teils mit öffentlichen Dateien führt dazu, dass Assets wie CSS und Bilder 404-Fehler oder in Ihrem Fall MIME-Typfehler zurückgeben
Kristian

1
Für meinen Fall wurde Ihre Frage eine Antwort. Prost.
Vassily

Antworten:


93

Das include /etc/nginx/mime.types;Unter- location / {statt Unter zu setzen http {löste das Problem für mich.


3
Beachten Sie auch, dass, wenn Sie die Konfiguration von Grund auf neu starten - mit Ausnahme der MIME-Typen - include mime.types;ihre Aufgabe erfüllt, da sie (zumindest unter Windows, Nginx 1.5.2) nur relativ zu anderen Konfigurationsdateien ist.
Omilke

13
Beachten Sie außerdem, dass Sie die Site in Ihrem Browser vollständig aktualisieren sollten, z. B. mit Strg + F5, um zu verhindern, dass zwischengespeicherte Dateien mit falschen Headern abgerufen werden.
CarelZA

1
Das ist wirklich fantastisch.
Mtyurt

1
Das funktioniert zwar, aber warum? in http sollte reichen! Tatsächlich funktionierte es über ein Jahr lang auf einer Entwicklungsbox so und heute funktionierte es einfach nicht mehr, ohne Änderungen vorzunehmen (kein Nginx-Update oder gar Neustart).
Upsfeup

u Herr, rettete meinen Tag
eav

34

Ich habe im Web eine Problemumgehung gefunden. Ich habe /etc/nginx/conf.d/default.conf Folgendes hinzugefügt:

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

Das Problem ist jetzt, dass eine Anfrage an meine CSS-Datei nicht gut umgeleitet wird, als ob root nicht richtig eingestellt ist. In error.log sehe ich

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

Als zweite Problemumgehung habe ich jedem definierten Speicherort den Stamm hinzugefügt. Jetzt funktioniert es, scheint aber etwas überflüssig. Wird root nicht von / location geerbt?


2
Ist das ein Nginx-Fehler? Nur so kann ich es zum Laufen bringen. Übrigens benutze ich Arch Linux, nginx 1.4.1-3.
tprk77

@ tprk77 kein Fehler, die akzeptierte Antwort ist eine Problemumgehung
zamnuts

23

style.csswird aufgrund Ihrer "location /" - Direktive tatsächlich über fastcgi verarbeitet. Es ist also fastcgi, das die Datei ( nginx > fastcgi > filesystem) und nicht das Dateisystem direkt ( nginx > filesystem) bereitstellt .

Aus einem Grund, den ich noch nicht herausgefunden habe (ich bin sicher, dass es irgendwo eine Direktive gibt), wendet NGINX den text/htmlMIME- Typ auf alles an, was von FastCGI bereitgestellt wird, sofern die Backend-Anwendung nicht ausdrücklich etwas anderes sagt.

Der Schuldige ist dieser Konfigurationsblock speziell:

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

Es sollte sein:

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

Diese Änderung stellt sicher, dass nur *.phpDateien von fastcgi angefordert werden. Zu diesem Zeitpunkt wendet NGINX den richtigen MIME-Typ an. Wenn eine URL neu geschrieben wird, müssen Sie dies vor der Standortanweisung ( location ~\.php$) behandeln, damit die richtige Erweiterung abgeleitet und ordnungsgemäß an fastcgi weitergeleitet wird.

Lesen Sie diesen Artikel unbedingt in Bezug auf zusätzliche Sicherheitsaspekte mittry_files . Angesichts der Auswirkungen auf die Sicherheit halte ich dies für eine Funktion und nicht für einen Fehler.


1
Dies sollte die akzeptierte Antwort sein, siehe auch: forum.nginx.org/read.php?2,155222,155261#msg-155261
Alfred Bez

1
Es scheint, dass dies mehr als 4 Jahre nach der ursprünglichen Frage immer noch ein Problem ist. Wie sieht die richtige Konfiguration aus, wenn Sie nur statischen Inhalt bereitstellen, dh kein PHP?
Rob

10

Ich bin auch auf dieses Problem gestoßen. Es verwirrte mich, bis mir klar wurde, was los war:

Du hast das:

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

Du willst das:

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

Es scheint entweder einen Fehler in Nginx oder einen Mangel in den Dokumenten zu geben (dies könnte das beabsichtigte Verhalten sein, aber es ist seltsam).


3

Ich folgte einigen Tipps aus den restlichen Antworten und stellte fest, dass diese seltsamen Aktionen hilfreich waren (zumindest in meinem Fall).

1) Ich habe dem Serverblock Folgendes hinzugefügt:

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

Ich habe nginx neu geladen und dies in error.log erhalten:

2015/06/18 11:32:29 [Fehler] 3430 # 3430: * 169 open () "/etc/nginx/html/css/mysite.css" fehlgeschlagen (2: Keine solche Datei oder kein solches Verzeichnis)

2) Ich habe die Zeilen gelöscht, Nginx neu geladen und funktionierendes CSS erhalten. Ich kann nicht erklären, was passiert ist, weil meine Conf-Datei so geworden ist wie zuvor.

Mein Fall war sauberes xubuntu 14.04 auf VirtualBox, nginx / 1.9.2, eine Zeile 127.51.1.1 mysitein / etc / hosts und ziemlich einfach /etc/nginx/nginx.conf mit einem Serverblock:

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

Ahah, genau wie du xD Kein MIME-Typ, füge die Regel hinzu, lade neu, hole die 404, entferne die Regel, lade neu, es funktioniert mit einem guten MIME-Typ ... Ubuntu 19.10, Nginx 1.16.1
Doubidou

2

Ich bin auch mit diesem Problem konfrontiert, ich habe viele Lösungen ausprobiert, aber keine hat wirklich für mich funktioniert

Hier ist, wie ich es gelöst habe;

A . Gewähren Sie /var/www/nginx-demodem Nginx-Benutzer ( www-data) das Eigentum am Stammverzeichnis des Domänendokuments (z. B. mein Stammverzeichnis ), um Berechtigungsprobleme zu vermeiden:

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

B. Vergewissern Sie sich, dass Ihr virtueller Host-Serverblock diesem Standard entspricht (sagen wir, ich verwende ihn localhostals Servernamen und als Root als /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. Testen Sie die Nginx-Konfiguration auf korrekte Syntax:

sudo nginx -t

Wenn die Konfigurationssyntax keine Fehler enthält, sieht die Ausgabe folgendermaßen aus:

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

D. Starten Sie den Nginx-Dienst neu, damit die Änderungen wirksam werden:

sudo systemctl restart nginx

E. Aktualisieren Sie Ihre Website in Ihrem Browser hart, um zwischengespeicherte Dateien mit falschen Überschriften mit den Tastaturtasten Strg + F5 oder Strg + Fn + F5 zu vermeiden .

Das ist alles.

Ich hoffe das hilft.


2
  1. Fügen Sie in Ihrer Datei nginx.conf Ihrem httpKörper mime.types wie folgt hinzu :

    http {
        include /etc/nginx/mime.types;
        include /etc/nginx/conf.d/*.conf;
    }
    
  2. Gehen Sie nun zum Terminal und führen Sie Folgendes aus, um den Server neu zu laden:

    sudo nginx -s reload
    
  3. Öffnen Sie Ihren Webbrowser und führen Sie ein Hard-Reload durch: Klicken Sie mit der rechten Maustaste auf die Schaltfläche zum erneuten Laden und wählen Sie Hard-Reload. Auf Chrome können Sie tun , Ctrl+ Shift+R


1

Für mich war dies ein Werbeblocker, der im Webbrowser installiert war. Die style.css wurde nicht geladen


0

Ich hatte das gleiche Problem in Windows. Ich habe es gelöst und Folgendes hinzugefügt: include mime.types; unter http { in meiner Datei nginx.conf. Dann hat es immer noch nicht funktioniert. Also habe ich mir die Datei error.log angesehen und festgestellt, dass versucht wurde, die CSS- und Javascript-Dateien aus dem Dateipfad aufzuladen, jedoch mit einem / http-Ordner dazwischen. Beispiel: Meine CSS-Datei befand sich in: "C: \ Benutzer \ pc \ Dokumente \ nginx-Server / Player-Web / CSS / Index.css" und wurde von "C: \ Benutzer \ PC \ Dokumente \ nginx" übernommen -server / html /player-web/css/index.css "Also habe ich meinen Player-Web-Ordner in einen HTML-Ordner geändert und es hat funktioniert;)


0

Ich habe mir tatsächlich die Zeit genommen, alle oben genannten Antworten auf dieser Seite durchzugehen, aber ohne Erfolg. Ich habe gerade den Eigentümer und die Berechtigungen von Verzeichnissen und Unterverzeichnissen mit dem folgenden Befehl geändert. Ich habe den Eigentümer des Webprojektverzeichnisses in /usr/share/nginx/htmlden rootBenutzer geändert, indem ich :

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

Und schließlich wurden die Berechtigungen dieses Verzeichnisses und der Unterverzeichnisse mithilfe von Folgendem geändert:

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

HINWEIS : Wenn dies abgelehnt wird, können Sie sudo verwenden


0

Ich hatte das gleiche Problem und keiner der oben genannten Punkte machte für mich einen Unterschied. Was funktionierte, war, dass mein Standort-PHP über allen anderen Standortblöcken lag.

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

-4

Fügen Sie dies Ihrer ngnix conf-Datei hinzu

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'";
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.