MIME types configuration in Nginx - Commands & Configuration

Introduction

Web servers need to tell browsers what kind of files they are sending. MIME types configuration helps the server label files correctly so browsers know how to handle them.

When you want your web server to serve images, videos, or documents with the correct file type.

When you add new file types to your website that the server does not recognize by default.

When you want to fix issues where browsers download files instead of displaying them.

When you want to improve security by controlling which file types your server sends.

When you want to customize how your server handles uncommon file extensions.

Config File - mime.types

mime.types

types {
    text/html                             html htm shtml;
    text/css                              css;
    text/xml                              xml;
    image/gif                             gif;
    image/jpeg                            jpeg jpg;
    application/javascript                js;
    application/atom+xml                  atom;
    application/rss+xml                   rss;
    text/mathml                          mml;
    text/plain                           txt;
    text/vnd.sun.j2me.app-descriptor    jad;
    text/vnd.wap.wml                     wml;
    text/x-component                     htc;
    image/png                           png;
    image/tiff                          tif tiff;
    image/vnd.wap.wbmp                  wbmp;
    image/x-icon                        ico;
    image/x-jng                         jng;
    image/x-ms-bmp                     bmp;
    image/svg+xml                      svg svgz;
    image/webp                         webp;
    application/font-woff               woff;
    application/java-archive            jar war ear;
    application/json                   json;
    application/mac-binhex40            hqx;
    application/msword                  doc;
    application/pdf                    pdf;
    application/postscript             ps eps ai;
    application/rtf                    rtf;
    application/vnd.apple.mpegurl       m3u8;
    application/vnd.ms-excel            xls;
    application/vnd.ms-fontobject       eot;
    application/vnd.ms-powerpoint       ppt;
    application/vnd.wap.wmlc            wmlc;
    application/vnd.google-earth.kml+xml kml;
    application/vnd.google-earth.kmz   kmz;
    application/x-7z-compressed         7z;
    application/x-cocoa                 cco;
    application/x-java-archive-diff    jardiff;
    application/x-java-jnlp-file        jnlp;
    application/x-makeself              run;
    application/x-perl                  pl pm;
    application/x-pilot                 prc pdb;
    application/x-rar-compressed        rar;
    application/x-redhat-package-manager rpm;
    application/x-sea                   sea;
    application/x-shockwave-flash       swf;
    application/x-stuffit               sit;
    application/x-tcl                   tcl tk;
    application/x-x509-ca-cert          der pem crt;
    application/x-xpinstall             xpi;
    application/xhtml+xml               xhtml;
    application/zip                    zip;
    application/octet-stream           bin exe dll;
    application/octet-stream           deb;
    application/octet-stream           dmg;
    application/octet-stream           iso img;
    application/octet-stream           msi msp msm;
    audio/midi                        mid midi kar;
    audio/mpeg                        mp3;
    audio/ogg                         ogg;
    audio/x-m4a                      m4a;
    audio/x-realaudio                 ra;
    video/3gpp                       3gpp 3gp;
    video/mp2t                       ts;
    video/mp4                        mp4;
    video/mpeg                       mpeg mpg;
    video/quicktime                  mov;
    video/webm                       webm;
    video/x-flv                     flv;
    video/x-m4v                     m4v;
    video/x-ms-wmv                  wmv;
    video/x-msvideo                 avi;
}

This file tells nginx which MIME types to use for different file extensions.

The types block maps file extensions like html or jpg to their correct MIME types like text/html or image/jpeg.

This helps browsers understand how to display or handle the files they receive.

Commands

This command tests the nginx configuration files for syntax errors before restarting the server.

Terminal

sudo nginx -t

Expected Output

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok

nginx: configuration file /etc/nginx/nginx.conf test is successful

This command reloads nginx to apply the new MIME types configuration without stopping the server.

Terminal

sudo systemctl reload nginx

Expected Output

No output (command runs silently)

This command checks the HTTP headers for a JPEG file to verify the correct MIME type is sent.

Terminal

curl -I http://localhost/example.jpg

Expected Output

HTTP/1.1 200 OK

Server: nginx/1.24.0

Content-Type: image/jpeg

Content-Length: 12345

Connection: keep-alive

→

-I - Fetch only HTTP headers without the body

Key Concept

If you remember nothing else from this pattern, remember: configuring MIME types correctly tells browsers how to handle your files safely and properly.

Common Mistakes

Editing the MIME types file but forgetting to reload nginx.

The server keeps using the old configuration, so changes have no effect.

Always run 'sudo nginx -t' to test and then 'sudo systemctl reload nginx' to apply changes.

Adding incorrect or unsupported MIME types with wrong syntax.

Nginx fails to start or ignores the configuration, causing errors or wrong file handling.

Use the correct syntax inside the 'types' block and verify with 'nginx -t' before reloading.

Summary

The mime.types file maps file extensions to correct MIME types for nginx.

Test nginx configuration syntax with 'nginx -t' before applying changes.

Reload nginx with 'systemctl reload nginx' to apply MIME type updates without downtime.

Practice

1. What is the main purpose of configuring MIME types in nginx?

easy

A. To tell browsers how to handle different file types

B. To set the server's IP address

C. To define user access permissions

D. To configure server logging format

Solution

1. Step 1: Understand MIME types role

   MIME types tell browsers what kind of content is being sent, so they can handle it properly.

2. Step 2: Relate to nginx configuration

   In nginx, configuring MIME types maps file extensions to content types for correct browser handling.

3. Final Answer:

   To tell browsers how to handle different file types -> Option A

4. Quick Check:

   MIME types = browser file handling [OK]

Hint: MIME types = file type instructions for browsers [OK]

Common Mistakes:

• Confusing MIME types with server IP settings
• Thinking MIME types control user permissions
• Mixing MIME types with logging configuration

2. Which of the following is the correct syntax to define MIME types in nginx configuration?

easy

A. mime_types { html text/html; css text/css; }

B. types { .html text/html; .css text/css; }

C. types { html: text/html; css: text/css; }

D. mime { .html = text/html; .css = text/css; }

Solution

1. Step 1: Recall nginx MIME types syntax

   The correct block is types { .ext mime/type; } with semicolons and dot before extension.

2. Step 2: Compare options

   types { .html text/html; .css text/css; } matches correct syntax with types { .html text/html; .css text/css; }.

3. Final Answer:

   types { .html text/html; .css text/css; } -> Option B

4. Quick Check:

   Correct syntax uses 'types' block with dot extensions [OK]

Hint: Use 'types { .ext mime/type; }' with dots and semicolons [OK]

Common Mistakes:

• Omitting dots before file extensions
• Using colons or equals instead of spaces
• Wrong block name like 'mime_types' or 'mime'

3. Given this nginx config snippet:

types {
  .json application/json;
  .xml application/xml;
}

What MIME type will nginx send for a file named data.json?

medium

A. application/json

B. text/plain

C. application/xml

D. text/html

Solution

1. Step 1: Check the file extension

   The file is named data.json, so the extension is .json.

2. Step 2: Match extension to MIME type in config

   The config maps .json to application/json.

3. Final Answer:

   application/json -> Option A

4. Quick Check:

   .json = application/json [OK]

Hint: Match file extension to MIME type in 'types' block [OK]

Common Mistakes:

• Confusing .json with .xml MIME type
• Assuming default text/plain without config
• Ignoring the dot before extension

4. You added this to your nginx config:

types {
  .txt text/plain
  .md text/markdown;
}

Why might nginx fail to start?

medium

A. MIME types cannot include 'text/markdown'

B. Wrong block name 'types' instead of 'mime_types'

C. File extensions must not have dots

D. Missing semicolon after .txt MIME type

Solution

1. Step 1: Check syntax for each MIME type line

   Each line must end with a semicolon; the line for .txt is missing it.

2. Step 2: Validate block name and extensions

   The block name types is correct, and dots before extensions are required.

3. Final Answer:

   Missing semicolon after .txt MIME type -> Option D

4. Quick Check:

   Every MIME type line ends with semicolon [OK]

Hint: Check semicolons after each MIME type line [OK]

Common Mistakes:

• Forgetting semicolon at line end
• Changing 'types' block name incorrectly
• Removing dots before extensions

5. You want nginx to serve a new file type .abc with MIME type application/x-abc. Which config snippet correctly adds this without removing existing types?

hard

A. mime_types { .abc application/x-abc; }

B. types { .abc application/x-abc; }

C. types { include mime.types; .abc application/x-abc; }

D. types { .abc = application/x-abc; }

Solution

1. Step 1: Preserve existing MIME types

   To keep existing types, include the default mime.types file inside the types block.

2. Step 2: Add new MIME type after include

   After including existing types, add .abc application/x-abc; to extend the list.

3. Final Answer:

   types { include mime.types; .abc application/x-abc; } -> Option C

4. Quick Check:

   Include existing types then add new ones [OK]

Hint: Include mime.types before adding new MIME types [OK]

Common Mistakes:

• Overwriting existing types by not including mime.types
• Using wrong block name 'mime_types'
• Using equals sign instead of space