【问题标题】:Nginx fails to load css filesNginx 加载 css 文件失败
【发布时间】:2012-04-21 22:47:38
【问题描述】:

我最近决定从 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 类型错误
  • 就我而言,您的问题已成为答案。干杯。

标签: css nginx mime


【解决方案1】:

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

【讨论】:

  • 这是一个 nginx 错误吗?这是我可以让它工作的唯一方法。顺便说一句,我使用的是 Arch Linux,nginx 1.4.1-3。
  • @tprk77 不是错误,接受的答案是一种变通方法,要获得正确的解决方案,请参阅我的答案stackoverflow.com/a/23282158/1481489
【解决方案2】:

include /etc/nginx/mime.types; 放在location / { 下而不是http { 下为我解决了这个问题。

【讨论】:

  • 还请注意,如果您从头开始配置-可能除了 mime 类型-include mime.types; 完成了它的工作,因为(至少在 windows 上,nginx 1.5.2)它是只是相对于其他配置文件。
  • 另请注意,您应该在浏览器中完全刷新站点,例如使用 ctrl+f5 刷新,避免缓存文件头不正确。
  • 这真是太棒了。
  • 这确实有效,但为什么呢?在http中应该足够了!事实上,它在开发盒上这样工作了一年多,今天它只是停止工作而没有做任何更改(没有 nginx 更新甚至重新启动)。
  • 先生,拯救了我的一天
【解决方案3】:

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

你有这个:

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

你想要这个:

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

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

【讨论】:

    【解决方案4】:

    style.css 实际上是通过 fastcgi 处理的,因为你的“location /”指令。所以提供文件的是 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;
    }
    

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

    请务必查看this article regarding additional security considerations using try_files。考虑到安全隐患,我认为这是一项功能,而不是错误。

    【讨论】:

    【解决方案5】:

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

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

    【讨论】:

    • 啊哈,和你一样 xD 没有 mime-type,添加规则,重新加载,获取 404,删除规则,重新加载,它适用于良好的 mime 类型...... Ubuntu 19.10,Nginx 1.16。 1
    【解决方案6】:

    将此添加到您的 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'";
    

    【讨论】:

      【解决方案7】:

      我在 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 文件夹,它工作了;)

      【讨论】:

      • 我也有同样的问题。但是移动到 html 文件夹对我来说不是一个选择。你知道为什么它会在 /html 之前添加吗?
      • 我有类似的问题。你找到解决方案和背后的原因了吗?
      • 我遇到了类似的问题,其中 /wordpress/ 被附加到路径中。所以我按照wordpress.org/support/article/changing-the-site-url编辑了wp-config.php文件来解决这个问题。
      【解决方案8】:

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

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

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

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

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

      【讨论】:

        【解决方案9】:

        我遇到了同样的问题,以上都没有对我产生任何影响,我的位置 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 /
        }
        

        【讨论】:

          【解决方案10】:

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

          我是这样解决的;

          一个。将域文档根目录(比如我的根目录是/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 缓存文件标题不正确。

          就是这样。

          我希望这会有所帮助。

          【讨论】:

            【解决方案11】:
            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

            【讨论】:

              【解决方案12】:

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

              【讨论】:

                【解决方案13】:

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

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

                charset utf-8; # Use the appropriate charset in place of "utf-8"
                

                【讨论】:

                  【解决方案14】:

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

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

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

                  【讨论】:

                    【解决方案15】:

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

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

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

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

                    &lt;link rel="stylesheet" href="src/styles.css" type="text/css"&gt;

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

                    【讨论】:

                      猜你喜欢
                      • 2015-10-08
                      • 2016-02-09
                      • 2019-01-16
                      • 2014-03-19
                      • 1970-01-01
                      • 1970-01-01
                      • 2018-05-27
                      • 1970-01-01
                      • 2020-04-28
                      相关资源
                      最近更新 更多