CSS 未加载，因为它的 MIME 类型

Posted 2023-03-15

【中文标题】CSS 未加载，因为它的 MIME 类型

【英文标题】：CSS was not loaded because its MIME type

【发布时间】：2016-12-23 09:30:04

【问题描述】：

我使用 nginx，我包含 mime.types，当我尝试访问我的 css 文件时，我一直出错。我试过插入“包括/etc/nginx/mime.types;”在“位置/”中但不起作用。

这是我的 nginx.conf：

user www-data;
worker_processes 4;
pid /run/nginx.pid;

events 
    worker_connections 768;
    # multi_accept on;


http 
server_names_hash_bucket_size 64;
upstream test_server 
  server unix:/var/www/test/run/gunicorn.sock fail_timeout=10s;


server 
    listen   80;
    server_name ec2-#-#-#-#.sa-east-1.compute.amazonaws.com;

    client_max_body_size 4G;

    access_log /var/www/test/logs/nginx-access.log;
    error_log /var/www/test/logs/nginx-error.log warn;

    location /static/ 
          autoindex on;
        alias   /var/www/test/my-example/static/;
          include /etc/nginx/mime.types;
    

    location /media/ 
        autoindex on;
        alias   /var/www/test/my-example/media/;
    

    location / 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;

        if (!-f $request_filename) 
            proxy_pass http://test_server;
            break;
        
    

    #For favicon
    location  /favicon.ico 
        alias /var/www/test/test/static/img/favicon.ico;
    
    #For robots.txt
    location  /robots.txt 
        alias /var/www/test/test/static/robots.txt ;
    
    # Error pages
    error_page 500 502 503 504 /500.html;
    location = /500.html 
        root /var/www/test/my-example/static/;
    

还有我的 html 的头部：

<link rel="stylesheet"  type="text/css" href="../static/css/bootstrap.css">
    <link rel="stylesheet"  type="text/css" href="../static/css/combo.css">
    <link rel="stylesheet"  type="text/css" href="../static/css/font-awesome.min.css">
    <link rel='stylesheet' type="text/css" href="../static/css/raleway.css">

但我一直有这个错误：

未加载，因为它的 MIME 类型“text/plain”不是“text/css”

【问题讨论】：

Nginx fails to load css files的可能重复

你的html页面的地址是什么？

@J.Titus 当我说“我已经包含 mime.types 时，你读到了吗？

@DanielaMorais 你看过链接问题的答案了吗？我在你的 conf 文件中没有看到。

@J.Titus 当然我在这里发帖之前尝试过这样做（包括在位置/而不是在位置/static/中）。

【参考方案1】：

通常将include mime.types; 放置在外部http ... 块内，而不是放在location ... 块内，以便它是系统范围的，并被所有server ... 块和所有位置继承。

您的href="../static/css/ 语句是相对的，因此根据您提供的信息，我们无法判断该URI 是由location /static/ 块还是location / 块处理的。

您没有为location / 块定义root（或alias），因此if (!-f $request_filename) 语句的错误条件可能总是会以404 失败。

您可能希望在server ... 块中设置root /var/www/test/my-example，并允许它被一些location 块继承。不鼓励在可以使用root 的地方使用alias - 请参阅this document。

如果您的 CSS 文件是通过 proxy_pass http://test_server; 提供的，那么这是修复 MIME 类型的错误位置。

【参考方案2】：

另一种方法是修改/etc/nginx/mime.types并放入

    types 
    ....
    text/css     css plain;
    ....