Nginx css फ़ाइलों को लोड करने में विफल रहता है


81

मैंने हाल ही में Apache2 से Nginx पर स्विच करने का निर्णय लिया है। मैंने अपने CentOS सर्वर पर Nginx स्थापित किया और एक बुनियादी कॉन्फ़िगरेशन सेटअप किया। जब मैंने अपनी साइट को ब्राउज़र (एफएफ / क्रोम) में लोड करने की कोशिश की तो मैंने देखा कि सीएसएस फ़ाइल लोड नहीं है। मैंने त्रुटि कंसोल की जाँच की और यह संदेश देखा:

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

सीएसएस फ़ाइलों के लिए माइम प्रकार /etc/nginx/mime.types में सही ढंग से सेट किया गया है।

text/css css;

सब कुछ अच्छी तरह से कॉन्फ़िगर किया गया लगता है, लेकिन मेरी सीएसएस फाइलें अभी भी लोड नहीं हुई हैं। मेरी कोई व्याख्या नहीं है।

एक और बात ध्यान देने योग्य है। शुरू में मैंने एपेल रिपॉजिटरी का उपयोग करके नग्नेक्स को स्थापित किया और मुझे एक पुराना संस्करण मिला: 0.8 ... यह मुझे दिखाई दिया कि मेरी समस्या उस संस्करण में एक बग थी इसलिए मैंने 0.8 संस्करण की स्थापना रद्द की, नग्नेक्स रिपॉजिटरी को यम में जोड़ा और फिर नवीनतम संस्करण स्थापित किया: 1.0। १४। मुझे लगा कि नया संस्करण मेरी समस्या को हल कर देगा, लेकिन दुर्भाग्य से ऐसा नहीं था इसलिए मैं विचारों से बाहर चल रहा हूं।

मैं किसी भी मदद की सराहना करता हूं।

कॉन्फ़िगरेशन फ़ाइलें:

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

कृपया अपने कॉन्फ़िगर कोड में पेस्ट करें। आमतौर पर आपने अन्य प्रकार से अच्छी तरह से संभाला है, और आपकी सार्वजनिक फ़ाइलों के हिस्से पर इसकी लंघन जो कि सीएसएस और छवियों जैसी संपत्ति का कारण बनती है 404 त्रुटियां, या आपके मामले में, माइम प्रकार की त्रुटियां
क्रिस्टियन

1
मेरे मामले के लिए, आपके प्रश्न का उत्तर बन गया। चीयर्स।
वासिली

जवाबों:


96

include /etc/nginx/mime.types;अंडर डालने के location / {बजाय अंडर पास http {करना मेरे लिए समस्या का हल है।


3
यह भी ध्यान दें, कि यदि आप स्क्रैच से कॉन्फिग शुरू कर रहे हैं - माइम प्रकारों को छोड़कर - शायद include mime.types;अपना काम करता है, क्योंकि (कम से कम विंडोज़ पर, nginx 1.5.2) यह अन्य कॉन्फिग फाइलों के सापेक्ष है।
omilke

14
यह भी ध्यान दें, कि आप अपने ब्राउजर में साइट को पूरी तरह से रिफ्रेश करें जैसे कि गलत फाइल के साथ कैश्ड फाइल से बचने के लिए ctrl + f5 का उपयोग करें।
CarelZA

1
यह वास्तव में शानदार है।
जूथ

1
यह वास्तव में काम करता है, लेकिन क्यों? http में पर्याप्त होना चाहिए! वास्तव में, यह एक देव बॉक्स पर एक साल से अधिक समय तक काम कर रहा था और आज इसने बिना कोई बदलाव किए (बिना नग्नेक्स अपडेट या यहां तक ​​कि पुनरारंभ) काम करना बंद कर दिया।
अपसंस्कृति

यू सर, मेरा दिन बचाया
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 फ़ाइल के अनुरोध को अच्छी तरह से रीडायरेक्ट नहीं किया गया है, जैसे कि रूट सही तरीके से सेट नहीं किया गया है। त्रुटि में। मुझे दिखाई देता है

2012/04/11 14:01:23 [त्रुटि] 7260 # 0: * 2 खुला () "/etc/nginx//html/style.css"

इसलिए एक दूसरे वर्कअराउंड के रूप में मैंने प्रत्येक परिभाषित स्थान पर रूट जोड़ा। अब यह काम करता है, लेकिन थोड़ा बेमानी लगता है। क्या जड़ / स्थान से विरासत में नहीं मिली है?


2
क्या यह नगनेक्स बग है? यही एक तरीका है जिससे मैं काम कर सकता हूं। जिस तरह से मैं आर्क लिनक्स, nginx 1.4.1-3 का उपयोग कर रहा हूं।
tprk77

@ tprk77 बग नहीं, स्वीकृत जवाब एक काम के आसपास है, एक उचित समाधान के लिए मेरा उत्तर देखें stackoverflow.com/a/23282158/1481489
zamnuts

23

style.cssवास्तव में आपके "स्थान /" निर्देश के कारण फास्टसी के माध्यम से प्रक्रिया हो रही है। तो यह fastcgi है जो फ़ाइल ( nginx > fastcgi > filesystem) को सेवित कर रही है , और सीधे फाइलसिस्टम ( nginx > filesystem) को नहीं।

एक कारण के लिए मुझे अभी तक पता लगाना है (मुझे यकीन है कि वहाँ एक निर्देश कहीं है), एनजीआईएनएक्स फास्टटाइम text/htmlसे कुछ भी करने के लिए माइम प्रकार लागू करता है , जब तक कि बैकएंड आवेदन स्पष्ट रूप से नहीं कहता है।

अपराधी यह कॉन्फ़िगरेशन ब्लॉक विशेष रूप से है:

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फास्टगि से केवल फाइलें मांगी गई हैं इस बिंदु पर, NGINX सही MIME प्रकार लागू करेगा। यदि आपके पास कोई URL पुनर्लेखन हो रहा है, तो आपको स्थान निर्देश ( ) से पहले इसे संभालना होगा location ~\.php$ताकि सही एक्सटेंशन प्राप्त हो और ठीक से फास्टगि में रूट किया जाए।

अतिरिक्त सुरक्षा विचारों का उपयोग करके इस लेख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 को पुनः लोड किया और त्रुटि में यह प्राप्त किया।

2015/06/18 11:32:29 [त्रुटि] 3430 # 3430: * 169 खुला () "/etc/nginx/html/css/mysite.css" विफल (2: ऐसी कोई फ़ाइल या निर्देशिका नहीं)

2) मैंने पंक्तियों को हटा दिया, नग्नेक्स को फिर से लोड किया और सीएसएस काम कर रहा था। मैं समझा नहीं सकता कि क्या ख़ुशी है क्योंकि मेरी गोपनीय फ़ाइल पहले जैसी थी।

मेरा मामला क्लीनबॉक्स xubuntu 14.04 वर्चुअलबॉक्स, nginx / 1.9.2 पर, एक पंक्ति 127.51.1.1 mysiteमें / etc / होस्ट्स और एक सर्वर ब्लॉक के साथ बहुत ही सरल /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 कोई माइम-प्रकार नहीं, नियम जोड़ते हैं, पुनः लोड करते हैं, 404 प्राप्त करते हैं, नियम हटाते हैं, पुनः लोड करते हैं, यह अच्छे माइम प्रकार के साथ काम करता है ... उबंटू 19.10, Nginx 1.16.1
डाउडिड

2

मैं भी इस मुद्दे का सामना करता हूं, मैंने बहुत सारे समाधानों की कोशिश की, लेकिन वास्तव में मेरे लिए किसी ने काम नहीं किया

यहां बताया गया है कि मैंने इसे कैसे हल किया;

। किसी भी अनुमति के मुद्दों से बचने के लिए डोमेन दस्तावेज़ रूट डायरेक्टरी (मेरी रूट डायरेक्टरी कहें /var/www/nginx-demo) को ग्रांट स्वामित्व ( 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

डी। परिवर्तनों को प्रभावी करने के लिए Nginx सेवा को पुनरारंभ करें:

sudo systemctl restart nginx

ई। हार्ड कीबोर्ड कुंजी Ctrl + F5 या Ctrl + Fn + 5 का उपयोग करके गलत हेडर से बचने के लिए अपनी वेबसाइट को अपने ब्राउज़र में ताज़ा करें

बस इतना ही।

आशा है कि ये आपकी मदद करेगा।


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. अपना वेब ब्राउजर खोलें और हार्ड रीलोड करें: रीलोड बटन पर राइट क्लिक करें और हार्ड रीलोड का चयन करें। क्रोम पर आप क्या कर सकते हैं Ctrl+ Shift+R


1

मेरे लिए यह वेब ब्राउज़र पर स्थापित किया गया विज्ञापन अवरोधक था। यह style.css को लोड नहीं होने दे रहा था


0

मुझे विंडोज में भी यही समस्या थी। मैंने इसे जोड़कर हल किया: mime.types; http के तहत मेरी nginx.conf फ़ाइल में। फिर भी यह काम नहीं किया .. तो मैंने error.log फ़ाइल को देखा और मैंने देखा कि यह फ़ाइल पथ से .css और जावास्क्रिप्ट फ़ाइलों को चार्ज करने की कोशिश कर रहा है, लेकिन बीच में / http फ़ोल्डर के साथ। Ex: my .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

मैंने वास्तव में अपना समय इस पृष्ठ पर उपरोक्त सभी उत्तरों के माध्यम से लिया, लेकिन कोई फायदा नहीं हुआ। मैं तो बस मालिक और निर्देशिका और उप-निर्देशिका निम्नलिखित command.I का उपयोग करने का अनुमतियों में वेब परियोजना निर्देशिका के मालिक बदल बदलने के लिए हुआ /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

यही समस्या डेबियन 10.6 पर Nginx 1.14.2 के साथ आई।

इसे charsetचर सेट करके हल किया जा सकता है । सर्वर ब्लॉक में जोड़कर, server_nameनिम्नलिखित निर्देश के नीचे:

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

-4

इसे अपनी 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'";
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.