Nginx fails to load css files
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)
style.css
is actually being process via fastcgi due to your "location /" directive. So it is fastcgi that is serving up the file (nginx > fastcgi > filesystem
), and not the filesystem directly (nginx > 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.
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 ?
Putting the include /etc/nginx/mime.types;
under location / {
instead of under http {
solved the issue for me.