Question

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

@ApplicationPath("/")
public class MyApplication extends ResourceConfig {

    public MyApplication() {
        // Register resources and providers using package-scanning.
        packages("my.package");

        // Register my custom provider - not needed if it's in my.package.
        register(CorsFilter.class);
        // Register an instance of LoggingFilter.
        register(new LoggingFilter(LOGGER, true));

        ...
    }
}

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

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

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

在html文件中，我刚刚导入了CSS：

Content-Type: text/plain

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

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

我尝试了没有位置限制的部分，或者尝试过：

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中添加了它，仍然没有帮助。

还有什么可以解决的吗？

Answer 1

以防万一有人遇到相同的问题并使用docker。这是关键词-我将docker与图像nginx：latest一起使用会导致问题，我将其更改为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;
    }
}

Answer 2

我自己解决了这个问题。我这边的问题是实际的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 文件本身的内容。

Answer 3

我遇到了这个问题。为了为我的静态javascript和CSS文件解决此问题，请按如下所示添加类型AND 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的警告一样引发任何警告或错误，但是无论如何还是不起作用，我非常感谢修复程序对两者都起作用。祝你好运！

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

无缝运行

Nginx将CSS文件加载为文本/纯文本

4 个答案: