Nginx fails to load css files

Question

I ve recently decided to switch from Apache2 to Nginx  I installed Nginx on my CentOS server and setup a basic configuration  When I tried to load my site in browser  FF Chrome  I noticed that css file is not loaded  I checked the error console and saw this message   Error  The stylesheet http   example com style css was not loaded because its MIME type   text html   is not  text css    I checked Nginx configuration and everything seems to be fine   http       include  etc nginx mime types                     The mime type for css files is correctly set in  etc nginx mime types   text css css   Everything seems to be well configured but my css files are still not loaded  I have no explanation   Another thing worth mentioning  Initially I installed Nginx using epel repositories and i got an old version  0 8    It appeared to me that my problem was a bug in that version so I uninstalled 0 8 version  added nginx repository to yum and then installed latest version  1 0 14  I thought the new version will solve my problem  but unfortunately it didn t so I am running out of ideas   I appreciate any help   Configuration files    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

User · Answer

I ran into this issue too   It confused me until I realized what was wrong   You have this   include        etc nginx mime types  default type  application octet-stream    You want this   default type  application octet-stream  include        etc nginx mime types    there appears to either be a bug in nginx or a deficiency in the docs  this could be the intended behavior  but it is odd

User · Answer

style css is actually being process via fastcgi due to your  location    directive  So it is fastcgi that is serving up the file  nginx  gt  fastcgi  gt  filesystem   and not the filesystem directly  nginx  gt  filesystem    For a reason I have yet to figure out  I m sure there s a directive somewhere   NGINX applies the mime type text html to anything being served from fastcgi  unless the backend application explicitly says otherwise   The culprit is this configuration block specifically   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      It should be   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      This change makes sure only   php files are requested from fastcgi  At this point  NGINX will apply the correct MIME type  If you have any URL rewriting happening  you must handle this before the location directive  location    php   so that the correct extension is derived and properly routed to fastcgi   Be sure to check out this article regarding additional security considerations using try files  Given the security implications  I consider this a feature and not a bug

User · Answer

Putting the  include   etc nginx mime types  under location     instead of under http   solved the issue for me

User · Answer

I actually took my time went through all the above answers on this page but to no avail  I just happened to change the owner and the permissions of directory and sub-directories using the following command I changed the owner of the web project directory in  usr share nginx html to the root user using   chown root  usr share nginx html mywebprojectdir    And finally changed the permissions of that directory and sub-directories using   chmod 755  usr share nginx html mywebprojectdir    NOTE  if denied   you can use sudo

User · Answer

I found an workaround on the web  I added to  etc nginx conf d default conf the following   location     css       add header  Content-Type    text css    location     js       add header  Content-Type    application x-javascript      The problem now is that a request to my css file isn t redirected well  as if root is not correctly set  In error log I see  2012 04 11 14 01 23  error  7260 0   2 open     etc nginx  html style css   So as a second workaround I added the root to each defined location  Now it works  but seems a little redundant  Isn t root inherited from   location

User · Answer

I had the same problem in Windows  I solved it adding  include mime types  under http  in my nginx conf file  Then it still didn t work   so I looked at the error log file and I noticed it was trying to charge the  css and javascript files from the file path but with an  http folder between  Ex  my  css was in    C  Users pc Documents nginx-server player-web css index css  and it was taking it from   C  Users pc Documents nginx-server html player-web css index css  So i changed my player-web folder inside an html folder and it worked

User · Answer

For me this was ad blocker installed on web browser  It was not letting load the style css

User · Answer

I was having the same issue and none of the above made any difference for me what did work was having my location php above any other location blocks   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  lt full moodledata path gt     ensure the path ends with

User · Answer

I followed some tips from the rest answers and discovered that these odd actions helped  at least in my case    1  I added to server block the following   location     css    add header Content-Type text css      I reloaded nginx and got this in error log   2015 06 18 11 32 29  error  3430 3430   169 open     etc nginx html css mysite css  failed  2  No such file or directory   2  I deleted the rows  reloaded nginx and got working css  I can t explain what happend because my conf file became such as before   My case was clean xubuntu 14 04 on VirtualBox  nginx 1 9 2  a row 127 51 1 1 mysite in  etc hosts and pretty simple  etc nginx nginx conf with a server block   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

User · Answer

In your nginx conf file  add mime types to your http body like so   http       include  etc nginx mime types      include  etc nginx conf d   conf     Now go to the terminal and run the following to reload the server   sudo nginx -s reload  Open your web browser and do a hard reload  Right click on the reload button and select hard reload  On Chrome you can do Ctrl Shift R

User · Answer

I also face this issue  I tried a lot of solutions  but none really worked for me  Here s how I solved it   A  Grant ownership of the domain document root directory  say my root directory is var www nginx-demo  to the Nginx user  www-data  to avoid any permission issues   sudo chown -R www-data   var www nginx-demo   B  Confirm that your virtual host server block conforms to this standard  say I am using localhost as my server name and my root as  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  Test the Nginx configuration for correct syntax   sudo nginx -t   If there are no errors in the configuration syntax the output will look like this   nginx  the configuration file  etc nginx nginx conf syntax is ok nginx  configuration file  etc nginx nginx conf test is successful   D  Restart the Nginx service for the changes to take effect   sudo systemctl restart nginx   E  Hard refresh your website in your browser to avoid cached files with incorrect headers using the keyboard keys Ctrl   F5 or Ctrl   Fn   F5   That s all   I hope this helps

User · Answer

add this to your ngnix conf file   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

User · Answer

The same problem came up with Nginx 1 14 2 on Debian 10 6  It can be resolved by setting the charset variable  By adding to the server block  beneath the server name directive the following  charset utf-8    Use the appropriate charset in place of  quot utf-8 quot

[css] Nginx fails to load css files

Examples related to css

Examples related to nginx

Examples related to mime