nginx 将 css 文件加载为文本/纯文本答案

【问题标题】：Prevent nginx from serving css files as text/plainnginx 将 css 文件加载为文本/纯文本
【发布时间】：2019-07-11 22:58:55
【问题描述】：

我正在将 nginx 配置为仅加载静态文件，但我不知道为什么 .css 文件被解释为文本/纯文本 - 最后浏览器无法加载它。

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:13000/styles.css".

当我在 css 文件的 Web 浏览器中检查响应头时：

Content-Type: text/plain

我知道在堆栈上我们有很多问题，我已经阅读了它们但仍然无法正常工作。

在 html 文件中我刚刚导入 css：

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

我的 /etc/nginx/nginx.conf 是：

worker_processes        1;
events {
    worker_connections  512;
}

http {
    server {
        listen       80;
        server_name  0.0.0.0:80;
        include /etc/nginx/mime.types;
        root   /project/app;

        location ~* ^.+\.(js|css)$ {
            expires 10d;
        }
    }
}

我尝试不使用任何位置部分或尝试使用：

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

在其他线程的一些回复中，我看到这部分是必需的：

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

我在http 部分添加了它，然后在server 和location 中添加了它，仍然没有帮助我。

我还能做些什么来解决它？

【问题讨论】：

在 w3c 文档中找到：In HTML5, the type attribute is no longer required for CSS。没有type，你还有问题吗？（网址：w3schools.com/tags/att_style_type.asp）
在更改为<link href="styles.css" rel="stylesheet"/> 后，浏览器中的错误消失了，但来自 nginx 的 css 文件仍然是纯文本 - css 无法正常工作
你使用 fastcgi 吗？如果是这样，这个答案可能会对您有所帮助：stackoverflow.com/questions/10075304/…（即使问题似乎出在text/html 而不是text/plain）
我没用过，有问题的 nginx.conf 就是我所拥有的一切，它只是没有后端的前端应用程序

标签： css nginx mime

【解决方案1】：

以防万一有人遇到同样的问题并使用 docker。这是关键字 - 我使用带有图像 nginx:latest 的 docker 会导致问题，我已将其更改为 nginx:1.14.2 并且一切正常。

在html中，导入css：

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

我的 nginx.conf 配置：

worker_processes        1;
events {
    worker_connections  512;
}

http {
    include    mime.types;
    sendfile on;
    server {
        listen       80;
        server_name  0.0.0.0:80;
        root   /project/app;
    }
}

【讨论】：

字符串“包括 mime.types;”应该在 http 部分，而不是服务器。在新配置中，情况就是这样，因此可以正常工作。
只需添加：“include mime.types;”和“发送文件；”为我工作

【解决方案2】：

我遇到了这个问题。为了解决我的静态 javascript 和 css 文件的问题，需要添加类型和 uic-remove，如下所示：

<link rel="stylesheet" uic-remove href="/index.css" type="text/css">
<script uic-remove type="application/javascript" src="./index.js"></script>

注意：Javascript 链接没有像 css 的警告那样抛出任何警告或错误，但它仍然无法正常工作，我感谢上天修复对两者都有效。祝你好运！

【讨论】：

【解决方案3】：

我自己解决了这个问题。我这边的问题是实际的 nginx 配置，让我解释一下。

不工作（之前）：

我的 dockerfile 包含这行代码：“COPY deployment/nginx.conf /etc/nginx/nginx.conf”
我的 nginx.conf 包含“http {”部分

我是如何解决的：

我将 docker 文件更新为：“COPY deployment/nginx.conf /etc/nginx/conf.d/default.conf”（检查我要复制的新路径）
我的 nginx.conf 不再包含“http {”块，只包含“server {”块。（这有效，因为我正在添加一个新的配置文件）。

瞧！希望能帮助到你！总而言之，罪魁祸首是我复制配置文件和我的 conf 文件本身的内容。

【讨论】：

【解决方案4】：

我曾经在我的测试服务器上遇到过类似的问题。我发现 nginx 以正确的方式做每一件事。问题是文件的引用。浏览器可以找到资源，但无法从所描述的库中加载它们。

location / { # default base
    root /var/www/html/myfiles; # my root folder
    try_files $uri /index.html;
    include  /etc/nginx/mime.types;
}

将基础更改为...

location /myfiles { # changed base
    root /var/www/html; # default root folder
    try_files $uri /index.html;
    include  /etc/nginx/mime.types;
}

完美运行

【讨论】：