Nginx не завантажує файли CSS


81

Нещодавно я вирішив перейти з 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 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
    ..........................................
}

будь-ласка, вставте свій код конфігурації. як правило, ви добре обробляли інші типи, і його пропуск через частину ваших загальнодоступних файлів, що призводить до того, що активи, такі як css та images, повертає помилки 404, або у вашому випадку помилки типу mime
Крістіан,

1
Для мого випадку ваше питання стало відповіддю. Ура.
Василь

Відповіді:


95

Постановка include /etc/nginx/mime.types;під location / {замість замість під http {вирішило проблему для мене.


3
також зауважте, що якщо ви запускаєте конфігурацію з нуля - крім типів mime, можливо - include mime.types;робить свою роботу, оскільки (принаймні у вікнах, nginx 1.5.2) це просто відносно інших конфігураційних файлів.
omilke

13
також зверніть увагу, що вам слід повністю оновити сайт у вашому браузері, наприклад, використовуючи ctrl + f5 для оновлення, щоб уникнути отримання кешованих файлів з неправильними заголовками.
CarelZA

1
Це справді фантастика.
mtyurt

1
Це справді працює, але чому? в http має бути достатньо! насправді, він працював так понад рік на коробці розробників, і сьогодні він просто перестав працювати, не вносячи жодних змін (без оновлення nginx або навіть перезапуску).
upsfeup

u, сер, врятував мій день
eav

34

Я знайшов обхідний шлях в Інтернеті. Я додав до /etc/nginx/conf.d/default.conf таке:

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

Проблема зараз полягає в тому, що запит до мого css-файлу не перенаправляється належним чином, ніби кореневий неправильно встановлений. В error.log я бачу

11.04.2012 14:01:23 [помилка] 7260 # 0: * 2 open () "/etc/nginx//html/style.css"

Отже, як другий обхідний шлях я додав корінь до кожного визначеного місця. Зараз це працює, але здається трохи зайвим. Хіба root не успадковується від / location?


2
Це помилка nginx? Тільки так я міг змусити його працювати. До речі, я використовую Arch Linux, nginx 1.4.1-3.
tprk77

@ Tprk77 не помилка, то прийнятий відповідь обхідним, правильне рішення , побачити моя відповідь stackoverflow.com/a/23282158/1481489
zamnuts

23

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

Ця зміна гарантує *.php, що у fastcgi запитуються лише файли. На цьому етапі NGINX застосує правильний тип MIME. Якщо у вас трапляється переписування URL-адреси, ви повинні обробити це перед директивою розташування ( location ~\.php$), щоб отримати правильне розширення та правильно перенаправити його на fastcgi.

Обов’язково ознайомтесь із цією статтею щодо використання додаткових міркувань безпекиtry_files . Враховуючи наслідки для безпеки, я вважаю це функцією, а не помилкою.


1
це повинна бути прийнята відповідь, див. також: forum.nginx.org/read.php?2,155222,155261#msg-155261
Альфред Без

1
Здається, що це проблема все ще залишається через понад 4 роки після вихідного запитання. Як виглядає правильна конфігурація, якщо ви обслуговуєте лише статичний вміст, тобто відсутність PHP?
грабувати

10

Я теж натрапив на це питання. Мене це бентежило, поки я не зрозумів, що не так:

У вас є це:

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

Ти хочеш це:

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

здається, що є помилка в nginx або недолік у документації (це може бути передбачувана поведінка, але це дивно)


3

Я скористався деякими порадами з решти відповідей і виявив, що ці дивні дії допомогли (принаймні в моєму випадку).

1) Я додав до блоку сервера наступне:

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

Я перезавантажив nginx і отримав це в error.log:

18.06.2015 11:32:29 [помилка] 3430 # 3430: * 169 open () "/etc/nginx/html/css/mysite.css" не вдалося (2: такого файлу чи каталогу немає)

2) Я видалив рядки, перезавантажив nginx і отримав робочий css. Я не можу пояснити, що сталося, тому що мій файл конф. Став таким, як раніше.

Моїм випадком був чистий 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/;
        }
    }
}

Ага, так само, як ви xD Немає mime-типу, додайте правило, перезавантажте, отримайте 404, видаліть правило, перезавантажте, воно працює з хорошим mime-типом ... Ubuntu 19.10, Nginx 1.16.1
Doubidou

2

Я також стикаюся з цією проблемою, я спробував багато рішень, але жодне з них насправді не працювало

Ось як я це вирішив;

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

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

Б. Переконайтеся, що ваш блок віртуального хост-сервера відповідає цьому стандарту (скажімо, я використовую 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.

Це все.

Сподіваюся, це допоможе.


2
  1. У своєму файлі nginx.conf додайте mime.types до свого httpтіла так:

    http {
        include /etc/nginx/mime.types;
        include /etc/nginx/conf.d/*.conf;
    }
    
  2. Тепер перейдіть до терміналу та запустіть наступне, щоб перезавантажити сервер:

    sudo nginx -s reload
    
  3. Відкрийте веб-браузер і виконайте жорстке перезавантаження: Клацніть правою кнопкою миші на кнопці перезавантаження та виберіть жорстке перезавантаження. У Chrome ви можете зробити Ctrl+ Shift+R


1

Для мене це був блокувач реклами, встановлений у веб-браузері. Це не дозволяло завантажувати style.css


0

У мене була та сама проблема в 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, і це спрацювало;)


0

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

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

І нарешті змінив дозволи цього каталогу та підкаталогів, використовуючи:

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

ПРИМІТКА : якщо відмовити, ви можете використовувати sudo


0

У мене була та сама проблема, і жодне з вищезазначеного не зробило для мене ніякої різниці: те, що працювало, було моє розташування 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 /
}

0

Та ж проблема виникла з Nginx 1.14.2 на Debian 10.6.

Це можна вирішити, встановивши charsetзмінну. Додавши до блоку сервера, під server_nameдирективою наведено наступне:

charset utf-8; # Use the appropriate charset in place of "utf-8"

-4

додати це до вашого файлу конф. ngnix

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'";
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.