96

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

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

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

15 回答 15

114

include /etc/nginx/mime.types;underlocation / {而不是underhttp {为我解决了这个问题。

于 2012-08-09T01:11:03.133 回答
42

我在网上找到了一种解决方法。我在 /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"

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

于 2012-04-11T18:14:55.677 回答
25

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

由于我还没有弄清楚的原因(我确定某处有一个指令),NGINX 将 mime 类型应用于text/html从 fastcgi 提供的任何内容,除非后端应用程序明确说明。

罪魁祸首就是这个配置块:

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. 考虑到安全隐患,我认为这是一项功能,而不是错误。

于 2014-04-25T00:26:28.200 回答
11

我也遇到了这个问题。它让我感到困惑,直到我意识到出了什么问题:

你有这个:

include       /etc/nginx/mime.types;
default_type  application/octet-stream;

你要这个:

default_type  application/octet-stream;
include       /etc/nginx/mime.types;

似乎 nginx 中存在错误或文档中存在缺陷(这可能是预期的行为,但很奇怪)

于 2014-01-04T20:29:55.830 回答
4

我遵循了其他答案中的一些提示,发现这些奇怪的行为有所帮助(至少在我的情况下)。

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/;
        }
    }
}
于 2015-06-18T11:13:56.213 回答
3
  1. 在您的 nginx.conf 文件中,将 mime.types 添加到您的http正文中,如下所示:

    http {
        include /etc/nginx/mime.types;
        include /etc/nginx/conf.d/*.conf;
    }
    
  2. 现在转到终端并运行以下命令以重新加载服务器:

    sudo nginx -s reload
    
  3. 打开您的网络浏览器并进行硬重新加载:右键单击重新加载按钮并选择硬重新加载。在 Chrome 上你可以做Ctrl+ Shift+R

于 2019-10-24T08:27:18.790 回答
2

我也面临这个问题,我尝试了很多解决方案,但没有一个真正适合我

这是我解决它的方法;

一个。将域文档根目录(比如我的根目录/var/www/nginx-demo)的所有权授予 Nginx 用户 ( www-data) 以避免任何权限问题:

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

B.确认您的虚拟主机服务器块符合此标准(假设我使用localhostas my server_name 和我的 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.测试 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 缓存文件标题不正确。

就这样。

我希望这有帮助。

于 2019-10-20T11:16:49.733 回答
1

我在 Windows 中遇到了同样的问题。我解决了它添加:包括 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 文件夹,它工作了;)

于 2017-04-05T13:45:04.627 回答
1

对我来说,这是安装在网络浏览器上的广告拦截器。它没有让加载 style.css

于 2020-01-11T23:02:32.457 回答
1

Debian 10.6 上的 Nginx 1.14.2 也出现了同样的问题。

可以通过设置charset变量来解决。通过添加到服务器块,在server_name指令下面:

charset utf-8; # Use the appropriate charset in place of "utf-8"
于 2020-11-16T23:57:06.203 回答
0

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

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

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

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

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

于 2018-03-18T13:39:32.733 回答
0

我遇到了同样的问题,以上都没有对我有任何影响是什么让我的位置 php 高于任何其他位置块。

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 /
}
于 2019-03-01T09:46:52.257 回答
0

在尝试了几个小时之后,我的情况与这里的所有其他情况都不同。它是我用作资源隐藏文件夹的路径的一个文件夹中的一个点:

<link type = "text/css" href="../../.res/css/bootstrap.min.css" rel="stylesheet">

这导致样式没有在浏览器中呈现,尽管它们正在从 nginx 加载而没有错误。只有 Firefox(不是 Chrome)抱怨 MIME 类型的 css 不是 css 而是文本。

于 2021-10-08T08:51:36.933 回答
0

我知道这已经晚了,但是在互联网上搜索解决方案之后,虽然所有人都集中在配置上,但实际上 html 本身很重要

在配置方面,在您定义了项目根目录之后,您应该指向您的统计数据,尤其是在这种情况下的 css,例如 - 我的 css 在 root/src

location ~*/src/.css {  
    include /etc/nginx/mime.types;
    add_header Content-type text/css;
}

在你的 HTML 中:确保正确使用relandtype

<link rel="stylesheet" href="src/styles.css" type="text/css">

希望这对将来的其他人有所帮助

于 2022-02-09T10:58:29.227 回答
-5

将此添加到您的 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'";
于 2016-06-22T15:50:31.580 回答