CSS和图片未被Nginx识别：资源被解释为样式表，但传输的MIME类型为text/html。

Question

我试图在子目录中运行Rainloop。 http://babylon/webmail。我发现CSS和JS无法被识别。例如：

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://babylon/webmail/rainloop/v/1.10.5.192/static/css/rainloop/v/1.10.5.192/static/css/app.min.css?standard".

我尝试了一些可能的解决方法，但都没有成功：

1. 在nginx.conf中找到了"include /etc/nginx/mime.types;"。

2. 有人说，php的位置搞砸了这一部分，所以我应该添加这一行：

   fastcgi_split_path_info ^(.+.php)(/.+)$; #这一行

但仍然不起作用。

3. 我为css和javascript添加了新的位置，但也没有任何效果。

我的配置文件是这样的：（它是一个包含的文件）

location ^~ /webmail {
    root /srv/rainloop/public_html;
    try_files $uri $uri/ /webmail/index.php?$query_string;
    access_log /srv/rainloop/logs/access.log;
    error_log /srv/rainloop/logs/error.log;
    index index.php;
    access_log /var/log/nginx/scripts.log scripts;

    location ~ \.php$ {
        #if (!-f $request_filename) { return 404; }
        include fastcgi_params;
        #fastcgi_split_path_info ^(.+\.php)(/.+)$; #this line
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
        #fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param SCRIPT_FILENAME /srv/rainloop/public_html/index.php;
    }

    location ~ /\.ht {
        deny all;
    }

    location ^~ /webmail/data {
        deny all;
    }
}

- Ruben

Answer 1

我认为它可以解决你的问题。

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

- Sanan Guliyev

---

@Sanan_Guliyev 我现在得到了 js 和 css 文件的 404 错误。“open()” /var/www/html/rainloop/v/1.10.5.192/static/js/min/boot.min.js" 失败。它应该是：“/srv/rainloop/public_html/rainloop/v/1.10.5.192/static/js/min/boot.min.js”。我已经在这两个位置中添加了 root，但仍然无法修复路径问题。 - Ruben

Answer 2

我遇到了与CSS和Javascript文件相同的问题，它们被作为text/html提供。在尝试了数小时而没有任何效果后，通过重新启动Chrome自动解决了该问题。

- AMS777

Answer 3

有时候需要移除

<Document html>

从 HTML 文件的顶部开始，一切都很完美。 试试看。

- Amir Kaftari

Answer 4

将以下两行代码添加到 http {} 中

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

- mohammad hosein bahmani

---

感谢你的回答。你能解释一下为什么应该添加这些吗？ - Aaron Bell

我其实不知道。它们用于传输一些CSS文件。如果您不添加它们，某些CSS文件将无法加载，并且此错误将在浏览器的检查页面中出现。 据我所记，这些行位于默认的nginx配置文件（/etc/nginx/nginx.conf）中。在此文件中，nginx还包括conf.d和sites-enables目录中的所有配置文件。因此，无需将这些行添加到我们的nginx文件中。但是，如果我们想使用自定义的nginx.conf文件，则必须添加它们。 - mohammad hosein bahmani

Answer 5

将以下代码块添加到适当的位置块中：

types {
    text/css css;
}

- shukebeta