Nginx无法加载CSS文件


80

我最近决定从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".

我检查了Nginx的配置,一切似乎都很好:

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

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

text/css css;

一切似乎都配置正确,但我的css文件仍未加载。我没有解释

另一件事值得一提。最初,我使用epel存储库安装了Nginx,并且得到了一个旧版本:0.8 ...在我看来,我的问题是该版本中的错误,因此我卸载了0.8版本,将nginx存储库添加到yum,然后安装了最新版本:1.0。 14。我以为新版本可以解决我的问题,但不幸的是,新版本无法解决我的想法。

感谢您的帮助。

配置文件:

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

请粘贴您的配置代码。通常您已经很好地处理了其他类型,并且跳过了公共文件部分,这导致诸如CSS和图像之类的资产返回404错误,或者在您的情况下,MIME类型错误
Kristian 2012年

1
就我而言,您的问题成为了答案。干杯。
Vassily

Answers:


93

include /etc/nginx/mime.types;location / {而不是在http {解决这个问题对我来说。


3
还要注意的是,如果您是从头开始配置的-可能除了mime类型-会include mime.types;完成它的工作,因为(至少在Windows中,nginx 1.5.2)它是相对于其他配置文件的。
omilke

13
还要注意,您应该在浏览器中完全刷新站点,例如使用ctrl + f5刷新,以免获取带有错误标题的缓存文件。
CarelZA 2014年

1
这真是太棒了。
mtyurt

1
这确实有效,但是为什么呢?在http中就足够了!实际上,它在开发箱上的运行情况已超过一年,而今天它只是停止了运行而没有做任何更改(没有nginx更新,甚至没有重启)。
upsfeup

先生,您救了我的一天
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文件的请求未正确重定向,好像root设置不正确。在error.log我看到

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

因此,作为第二种解决方法,我将根添加到每个定义的位置。现在可以使用,但似乎有点多余。根不是从/位置继承吗?


2
这是Nginx的错误吗?这是我可以使用它的唯一方法。顺便说一下,我正在使用Arch Linux,nginx 1.4.1-3。
tprk77

@ tprk77不是错误,可接受的答案是一种变通方法,有关正确的解决方案,请参阅我的答案stackoverflow.com/a/23282158/1481489
zamnuts 2014年

23

style.css由于您的“位置/”指令,实际上正在通过fastcgi处理。因此,是fastcgi提供文件(nginx > fastcgi > filesystem),而不是直接提供文件系统(nginx > filesystem)。

由于我尚未弄清楚的原因(我确定某个地方有一条指令),NGINX将mime类型应用于text/htmlfastcgi所提供的任何内容,除非后端应用程序明确声明不这样做。

罪魁祸首是此配置块:

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

此更改可确保仅从*.phpfastcgi请求文件。此时,NGINX将应用正确的MIME类型。如果发生任何URL重写,则必须在location指令()之前处理此问题location ~\.php$以便派生正确的扩展名并将其正确路由到fastcgi。

请务必查看有关使用的其他安全注意事项的本文try_files。考虑到安全隐患,我认为这是一个功能,而不是错误。


1
这应该是公认的答案,另请参见:forum.nginx.org/read.php?2,155222,155261#msg
Alfred Bez

1
在最初提出问题的四年之后,看来这仍然是一个问题。如果仅提供静态内容(即不提供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并在error.log中得到了它:

2015/06/18 11:32:29 [错误] 3430#3430:* 169 open()“ /etc/nginx/html/css/mysite.css”失败(2:无此类文件或目录)

2)我删除了行,重新加载了nginx并开始使用CSS。我无法解释发生了什么事,因为我的conf文件变得像以前一样。

我的案例是VirtualBox上干净的xubuntu 14.04,nginx / 1.9.2,127.51.1.1 mysite/ etc / hosts中的一行以及带有服务器块的非常简单的/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一样,没有mime类型,添加规则,重新加载,获取404,删除规则,重新加载,它与mime类型很好... Ubuntu 19.10,Nginx 1.16.1
Doubidou

2

我也遇到了这个问题,我尝试了很多解决方案,但没有一个真正对我有用

这是我解决的方法;

/var/www/nginx-demo向Nginx用户(www-data)授予域文档根目录的所有权(例如,我的根目录为),以避免出现任何权限问题:

sudo chown -R www-data: /var/www/nginx-demo

B.确认您的虚拟主机服务器块符合此标准(例如,我使用的localhost是server_name,我的根是/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

D.重新启动Nginx服务以使更改生效:

sudo systemctl restart nginx

E.使用键盘键Ctrl + F5Ctrl + Fn + F5硬刷新浏览器中的网站,以避免缓存带有错误标题的文件

就这样。

我希望这有帮助。


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. 打开Web浏览器并进行硬重装:右键单击重装按钮,然后选择硬重装。在Chrome,你可以做Ctrl+ Shift+R


1

对我来说,这是安装在网络浏览器上的广告拦截器。不允许加载style.css


0

我在Windows中遇到了同样的问题。我解决了添加:include mime.types; 在我的nginx.conf文件中的http {下。然后它仍然不起作用..所以我查看了error.log文件,发现它正在尝试从文件路径中向.css和javascript文件收费,但它们之间带有/ http文件夹。例如:我的.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文件夹中的player-web文件夹更改为有效;)


0

实际上,我花了点时间浏览了本页上所有上述答案,但无济于事。我只是碰巧使用以下命令更改了目录及其子目录的所有者和权限。我使用以下命令将Web项目目录的所有者更改/usr/share/nginx/htmlroot用户:

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

最后使用以下命令更改该目录和子目录的权限:

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

注意:如果被拒绝,您可以使用sudo


0

我遇到了同样的问题,以上内容均对我没有任何影响。

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

在Debian 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'";
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.