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
..........................................
}
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 <full_moodledata_path>; # ensure the path ends with /
}
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 ;)
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
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 "utf-8"
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'";
Putting the include /etc/nginx/mime.types;
under location / {
instead of under http {
solved the issue for me.
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)
For me this was ad blocker installed on web browser. It was not letting load the style.css
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
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 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/;
}
}
}
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.
Source: Stackoverflow.com