Nginx не загружает файлы css

Недавно я решил переключиться с Apache2 на Nginx. Я установил Nginx на моем CentOS-сервере и установил базовую конфигурацию. Когда я попытался загрузить мой сайт в браузере (FF/Chrome), я заметил, что файл css не загружен. Я проверил консоль ошибок и увидел это сообщение:

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

Я проверил конфигурацию Nginx, и все выглядит нормально:

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

Тип mime для файлов css правильно установлен в /etc/nginx/mime.types.

text/css css;

Все, кажется, хорошо настроено, но мои файлы css все еще не загружены. У меня нет объяснений.

Еще одно замечание. Первоначально я установил Nginx, используя репозитории epel, и получил старую версию: 0.8... Мне показалось, что моя проблема была ошибкой в этой версии, поэтому я удалил версию 0.8, добавил репозиторий nginx в yum, а затем установил последнюю версию: 1.0. 14. Я думал, что новая версия решит мою проблему, но, к сожалению, это не так, у меня заканчиваются идеи.

Я ценю любую помощь.

Конфигурационные файлы:

/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 скриптs to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP скриптs 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 document root
    # concurs with nginx 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
    ..........................................
}

Ответы

Ответ 1

Я нашел обходное решение в Интернете. Я добавил в /etc/nginx/conf.d/default.conf следующее:

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

Теперь проблема заключается в том, что запрос на мой файл css не перенаправляется хорошо, как если бы root был неправильно установлен. В error.log я вижу

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

Итак, в качестве второго обходного пути я добавил корень в каждое определенное местоположение. Теперь это работает, но кажется немного лишним. Не наследуется ли root от/location?

Ответ 2

Ввод include /etc/nginx/mime.types; в location / { вместо http { решил проблему для меня.

Ответ 3

style.css фактически является процессом через fastcgi из-за вашей директивы "location/". Таким образом, fastcgi обслуживает файл (nginx > fastcgi > filesystem), а не файловую систему напрямую (nginx > filesystem).

По какой-то причине мне еще предстоит выяснить (я уверен, что там где-то есть директива), NGINX применяет тип mime text/html к чему-либо, что обслуживается с fastcgi, если только бэкэнд-приложение явно не говорит иначе.

Виной является именно этот блок конфигурации:

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

Это должно быть:

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

Это изменение гарантирует, что с fastcgi запрашиваются только файлы *.php. На данный момент NGINX применит правильный тип MIME. Если у вас есть переписывание URL-адресов, вы должны обработать это до директивы location (location ~\.php$), чтобы получить правильное расширение и правильно перенаправить на fastcgi.

Обязательно ознакомьтесь с этой статьей относительно дополнительных соображений безопасности, используя try_files. Учитывая последствия для безопасности, я считаю эту функцию, а не ошибкой.

Ответ 4

Я тоже столкнулся с этой проблемой. Это смутило меня, пока я не понял, что не так:

У вас есть следующее:

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

Вы хотите:

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

появляется либо ошибка в nginx, либо недостаток в документах (это может быть предполагаемое поведение, но это нечетно)

Ответ 5

Я следил за советами остальных ответов и обнаружил, что эти нечетные действия помогли (по крайней мере, в моем случае).

1) Я добавил серверу следующее:

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

Я перезагрузил nginx и получил это в error.log:

2015/06/18 11:32:29 [error] 3430 # 3430: * 169 open() "/etc/nginx/html/css/mysite.css" не удалось (2: Нет такого файла или каталога)

2) Я удалил строки, перезагрузил nginx и получил рабочий css. Я не могу объяснить, что произошло, потому что мой файл conf стал таким, как раньше.

В моем случае был чистый xubuntu 14.04 на VirtualBox, nginx/1.9.2, строка 127.51.1.1 mysite в /etc/hosts и довольно простой /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;

    server {
        listen 80;
        server_name mysite;

        location / {
            root /home/testuser/dev/mysite/;
        }
    }
}

Ответ 6

Я также столкнулся с этой проблемой, я пробовал много решений, но ни одно из них не помогло мне

Вот как я это решил;

. Предоставьте право владения корневым каталогом документов домена (скажем, мой корневой каталог - /var/www/nginx-demo) пользователю Nginx (www-data), чтобы избежать проблем с разрешениями:

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

B. Убедитесь, что ваш блок сервера виртуального хоста соответствует этому стандарту (скажем, я использую localhost в качестве имени моего сервера и мой корень в качестве /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. Проверьте правильность синтаксиса конфигурации Nginx:

sudo nginx -t

Если в синтаксисе конфигурации нет ошибок, вывод будет выглядеть следующим образом:

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

D. Перезапустите службу Nginx, чтобы изменения вступили в силу:

sudo systemctl restart nginx

E. Жестко обновите свой веб-сайт в браузере, чтобы избежать кэширования файлов с неправильными заголовками с помощью клавиш клавиатуры Ctrl + F5 или Ctrl + Fn + F5.

Это все.

Надеюсь, это поможет.

Ответ 7

У меня была такая же проблема в Windows. Я решил добавить: include mime.types; под http {в моем файле nginx.conf. Тогда это все еще не сработало.. поэтому я посмотрел файл error.log, и я заметил, что он пытался зарядить файлы .css и javascript из пути к файлу, но с папкой /http между, Пример: мой .css был в: "C:\Users\pc\Documents\nginx-server/player-web/css/index.css" и он берет его из: "C:\Users\pc\Documents\nginx-server/ html/player-web/css/index.css" Так что я изменил папку с проигрывателем в папке html, и она сработала;)

Ответ 8

Я действительно потратил свое время на все вышеупомянутые ответы на этой странице, но безрезультатно. Мне просто удалось изменить владельца и разрешения каталога и подкаталогов, используя следующую команду. Я изменил владельца каталога веб-проектов в /usr/share/nginx/html на пользователя root, используя:

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

И, наконец, изменили разрешения этого каталога и подкаталогов, используя:

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

ПРИМЕЧАНИЕ: если это запрещено, вы можете использовать sudo

Ответ 9

У меня была та же проблема, и ни одно из вышеперечисленного не имело никакого значения для меня, что сработало, когда мой php местоположения был выше любых других блоков местоположения.

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

Ответ 10

Вы должны полностью обновить сайт в своем браузере, например, используя Ctrl + F5 для обновления, чтобы избежать получения кэшированных файлов с неправильными заголовками.

Ответ 11

добавьте это в свой файл 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'";