Nginx不能加载css文件。

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:

我最近决定从Apache2转到Nginx。我在CentOS服务器上安装了Nginx，并设置了一个基本配置。当我试图在浏览器(FF/Chrome)加载我的站点时，我注意到css文件没有加载。我检查了错误控制台，并看到了这个消息:

Error: The stylesheet http://example.com/style.css was not loaded because its MIME type, "text/html", is not "text/css".

错误:样式表http://example.com/style.css没有加载，因为它的MIME类型“text/html”不是“文本/css”。

I checked Nginx configuration and everything seems to be fine:

我检查了Nginx的配置，一切看起来都很好:

http {
    include /etc/nginx/mime.types;
    ..........
}

The mime type for css files is correctly set in /etc/nginx/mime.types.

css文件的mime类型在/etc/nginx/mime类型中正确设置。

text/css css;

文本/ css css;

Everything seems to be well configured but my css files are still not loaded. I have no explanation.

似乎一切都配置得很好，但我的css文件还没有加载。我没有解释。

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.

另一件事值得一提。最初，我使用epel储存库安装Nginx，我得到了一个旧版本:0.8…在我看来，我的问题是那个版本的bug，所以我卸载了0.8版本，添加了nginx存储库到yum，然后安装了最新版本:1.0.14。我以为这个新版本会解决我的问题，但不幸的是，我没有办法。

I appreciate any help.

我很感谢任何帮助。

Configuration files:

配置文件:

/etc/nginx/nginx.conf

/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

/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

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

8 个解决方案

#1

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

把包括/etc/nginx/mime.types;在位置/{而不是http{下解决了这个问题。

#2

I found an workaround on the web. I added to /etc/nginx/conf.d/default.conf the following:

我在网上找到了一个变通方法。我添加到/etc/nginx/conf.d/default.配置如下:

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

现在的问题是，对我的css文件的请求没有重定向，就好像根没有正确设置一样。日志我看到

2012/04/11 14:01:23 [error] 7260#0: *2 open() "/etc/nginx//html/style.css"

2012/04/11 14:01:23[错误]7260#0:*2打开()“/ 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 ?

因此，作为第二个解决方案，我将根添加到每个已定义的位置。现在它起作用了，但似乎有点多余。根不是从/位置继承的吗?

#3

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).

风格。css实际上是通过fastcgi处理的，因为你的“位置/”指令。所以是fastcgi，它提供了文件(nginx > fastcgi >文件系统)，而不是直接提供文件系统(nginx >文件系统)。

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.

由于一个原因，我还没有弄清楚(我肯定在某个地方有一个指令)，NGINX将mime类型的文本/html应用到任何从fastcgi提供的服务中，除非后台应用程序显式地声明其他内容。

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.

这种变化只会确保*。php文件被要求从fastcgi。此时，NGINX将应用正确的MIME类型。如果您有任何URL重写发生，您必须在位置指令(location ~\.php$)之前处理这个问题，这样正确的扩展就会被导出并正确地路由到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.

请务必查看本文关于使用try_files的附加安全考虑。考虑到安全问题，我认为这是一个特性，而不是bug。

#4

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)

在nginx中出现了bug或者文档缺乏(这可能是预期的行为，但是很奇怪)

#5

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:

1)我添加到server block中:

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

I reloaded nginx and got this in error.log:

我重新加载了nginx，并在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)

2015/06/18 11:32:29[错误]3430:*169打开()“/ etc / nginx / html / css / mysite。css“失败(2:没有这样的文件或目录)

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.

2)删除行，重新加载nginx，得到工作css。我无法解释发生了什么，因为我的conf文件变得像以前那样了。

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:

我的案例是在VirtualBox, nginx/1.9.2，在/etc/hosts中有127.51.1.1的mysite和非常简单的/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/;
        }
    }
}

#6

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

我在Windows上遇到了同样的问题。我解决了它的添加:包括mime类型;在我的nginx下。conf文件。然后它仍然不起作用。所以我看了这个错误。日志文件，我注意到它试图从文件路径向.css和javascript文件收取费用，但在两者之间有一个/http文件夹。我的。css是在:“C:\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \它从:“C:\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ - \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ - \ \ \ \ \ \ \ \ \ - \ \ \ \ \ \ \ \ \ \ \所以我把我的player-web文件夹放到了一个html文件夹中，它起作用了;

#7

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:

实际上，我花了很多时间在这一页上的所有答案，但都没用。我只是碰巧用下面的命令更改了所有者和目录和子目录的权限。我将/usr/share/nginx/html中的web项目目录的所有者更改为root用户:

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

乔恩根/usr/share/nginx/html/mywebprojectdir / *

And finally changed the permissions of that directory and sub-directories using:

最后更改了该目录和子目录的权限:

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

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

NOTE: if denied , you can use sudo

注意:如果被拒绝，你可以使用sudo。

#8

add this to your ngnix conf file

将其添加到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'";