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

Question

我使用 nginx，我包含 mime.types，当我尝试访问我的 css 文件时，我总是出错。我试过插入“include/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">

但我一直有这个错误:

was not loaded because its MIME type, "text/plain", is not "text/css"

Answer 1

通常将 include mime.types; 放在外部 http { ... } block 中，而不是放在 location { ... } block ，因此它是系统范围的，并由所有 server { ... } block 和所有位置继承。

您的href="../static/css/语句是相对的，因此从您提供的信息中，我们无法判断该URI是否正在被location/static/处理 block 或 location/ block 。

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

你可能想在 server { ... } block 中设置 root/var/www/test/my-example 并允许它被某些人继承location block 。不鼓励在可以使用 root 的地方使用 alias - 参见 this document .

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