How to have Django Admin Page CSS downloaded WITHOUT “Response Headers > Content-Type: text/html”? They do not have effect

Question

I use Docker, Nginx, Django, ... and this is the result when hitting "/admin/" django page.

As you can see:

3 css files have been downloaded but they have no effect
Request Headers include "Accept: text/css, ..."
Response Headers include "Content-Type: text/html"
Also, I get "Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://192.168.99.100/static_files/admin/css/base.css" in the console.

I have seen numerous similar? posts and have tried the respective ways to import mime types, since that seems to be the problem. Nothing was the solution.

Here is a relevant part of my "/etc/nginx/conf.d/default.conf" file within Ngingx Docker Container:

   server {
        listen 80;
        server_name 192_168_99_100;

        .
        .
        .

        location /static/ {
            autoindex off;
            alias /static_files/;
        }

        location ^~ /admin/ {
            autoindex off;
            include uwsgi_params;
            proxy_set_header  X-Real-IP  $remote_addr;    
            proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;         
            proxy_set_header Host $http_host;    
            proxy_redirect off;    
            proxy_pass http://192.168.99.100:8000; #without trailing slash
            proxy_read_timeout 900;
        }

        location / {

            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html =404;
        }

    }

Μaybe some useful info:

static_files is a volume that django container fills with their static files and it is being shared as folder "/static_files/" between several containers such us nginx.
django container listens to port 8000

Here is my "/etc/nginx/nginx.conf":

    user  nginx;
    worker_processes  auto;

    error_log  /var/log/nginx/error.log warn;
    pid        /var/run/nginx.pid;


    events {
        worker_connections  1024;
    }


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

        log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                        '$status $body_bytes_sent "$http_referer" '
                        '"$http_user_agent" "$http_x_forwarded_for"';

        access_log  /var/log/nginx/access.log  main;

        sendfile        on;
        #tcp_nopush     on;

        keepalive_timeout  65;

        #gzip  on;

        include /etc/nginx/conf.d/*.conf;
    }

As you can see, it contains:

"include /etc/nginx/mime.types;" <- this was the most common suggested solution
"include /etc/nginx/conf.d/*.conf;" <- that's how my previous file "/etc/nginx/conf.d/default.conf" is being included

What steps must I take now?

UPDATE

Docker prints show the above requests:

So /static_files/ is a top level directory and not at /usr/share/nginx/html/static_files? Your text/html file is probably /index.html as the location / block is the only one that matches the requested URI. — Richard Smith
@RichardSmith thanks for your answer. I updated my post providing docker console logs. As far as your 1st question, static_files is a docker volume that keeps django static files and it is shared as a top-level folder "/static_files/" across containers such as nginx. As far as the 2nd sentence, did you get any insight from the logs? I was expecting "static" instead of "static_files" to be part of the last 3 urls, so they would match "location /static/" rule. — alex

alex alex · Accepted Answer · 2019-11-17T15:10:58

I mistakenly had in my django settings.py:

STATIC_URL = '/static_files/'
STATIC_ROOT = os.path.join(BASE_DIR, "static_files")

and had to change to:

STATIC_URL = "/static/"
STATIC_ROOT = "/static_files/"

Explanation:

The first change ensures that django redirections for static files will contain urls with "static" instead of "static_files" and so, they will match the respective rule in nginx configuration.
The second change ensures that after "collectstatic" command, a folder named "static_files" will be created and keep the django static files. Also, according to my implementation, these files will be passed to a shared docker volume. Now, containers like nginx can see them under a top-level folder named "/static_files"

In case someone finds something wrong, let me know in order to update the explanation for others

How to have Django Admin Page CSS downloaded WITHOUT “Response Headers > Content-Type: text/html”? They do not have effect

1 Answers