Score:1

NGINX not Serving Image Files Properly

es flag

I have set up a django website that would be served by Nginx, everything was working perfectly not until images stopped showing recently.

I tried inspecting the possible cause of this strange development using curl and then realized that the Content-Type is not recognized as Content-Type: image/jpeg returns a Content-Type: text/html; charset=utf-8

This behavior looks strange as I have included mime.types in my nginx.conf file. Below is an example response from curl command

user@server:~$ curl -I https://domain.name/media/upload/image.jpg
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Sun, 29 May 2022 00:45:53 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 11392
Connection: keep-alive
X-Frame-Options: DENY
Vary: Cookie
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Cross-Origin-Opener-Policy: same-origin
Set-Cookie: csrftoken=T9Z3jrp4dzOAINxo6JzOUyjIGwGYHoc37TZaYsIOmHHyrQUw30vI6ETIAcy66Wnr; expires=Sun, 28 May 2023 00:45:53 GMT; Max-Age=31449600; Path=/; SameSite=Lax

Here is my full nginx.conf file

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
    # multi_accept on;
}

http {

    ##
    # Basic Settings
    ##

    sendfile on;
    tcp_nopush on;
    types_hash_max_size 2048;
    # server_tokens off;

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

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

    ##
    # SSL Settings
    ##

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    ##
    # Logging Settings
    ##

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##

    gzip on;

    # gzip_vary on;
    # gzip_proxied any;
    # gzip_comp_level 6;
    # gzip_buffers 16 8k;
    # gzip_http_version 1.1;
    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    ##
    # Virtual Host Configs
    ##

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}


#mail {
#   # See sample authentication script at:
#   # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#   # auth_http localhost/auth.php;
#   # pop3_capabilities "TOP" "USER";
#   # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#   server {
#       listen     localhost:110;
#       protocol   pop3;
#       proxy      on;
#   }
#
#   server {
#       listen     localhost:143;
#       protocol   imap;
#       proxy      on;
#   }
#}

Contents of /etc/nginx/sites-enabled/app

# /etc/nginx/sites-enabled

server {
    server_name my_server_IP my_server_NAME;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/user/app;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

    listen 443 ssl; 
    ssl_certificate /path/to/certfullchain.pem; 
    ssl_certificate_key /path/to/certprivkey.pem; 
    include /etc/cert-provider/options-ssl-nginx.conf; 
    ssl_dhparam /etc/cerrt-provider/ssl-dhparams.pem; 






}

server {
    if ($host = www.domain.name {
        return 301 https://$host$request_uri;
    } 


    if ($host = domain.name) {
        return 301 https://$host$request_uri;
    } 


    listen 80;
    server_name my_server_IP my_server_NAME;
    return 404; 




}

Note: I am serving this website with gunicorn

Score:1
es flag

I was able to fix this problem by adding new location directive which matches my media files. In this case my files are uploaded to media

I fixed this by add the following to my server block

  location /media/ {
        root /home/user/app;
    }

Now my new /etc/nginx/sites-enabled/app looks like this.

# /etc/nginx/sites-enabled

server {
    server_name my_server_IP my_server_NAME;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/user/app;
    }
    location /media/ {
        root /home/user/app;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

    listen 443 ssl; 
    ssl_certificate /path/to/certfullchain.pem; 
    ssl_certificate_key /path/to/certprivkey.pem; 
    include /etc/cert-provider/options-ssl-nginx.conf; 
    ssl_dhparam /etc/cerrt-provider/ssl-dhparams.pem; 






}

server {
    if ($host = www.domain.name {
        return 301 https://$host$request_uri;
    } 


    if ($host = domain.name) {
        return 301 https://$host$request_uri;
    } 


    listen 80;
    server_name my_server_IP my_server_NAME;
    return 404; 




}
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.