Cache-Control headers in Nginx - Practice Problems & Coding Challenges

Challenge - 5 Problems

💻 Command Output

intermediate

What is the effect of this Cache-Control header in nginx?

Given this nginx configuration snippet, what Cache-Control header will be sent to clients?

location /images/ {
  add_header Cache-Control "public, max-age=86400";
}

Nginx

curl -I http://example.com/images/logo.png

A Cache-Control: public, max-age=86400

B Cache-Control: no-cache

C Cache-Control: private, max-age=86400

D Cache-Control: no-store

💡 Hint

Look at the add_header directive and the value it sets.

The add_header directive sets the Cache-Control header exactly as specified. Here it sets it to 'public, max-age=86400', meaning the response can be cached by any cache for 86400 seconds (1 day).

🧠 Conceptual

intermediate

Which Cache-Control directive prevents caching by browsers but allows caching by proxies?

Select the Cache-Control directive that stops browsers from caching but still allows intermediate proxies to cache the response.

A no-store

B private

C public

D no-cache

💡 Hint

Think about which directive requires revalidation but does not forbid caching.

The 'no-cache' directive means caches must revalidate with the server before using the cached copy. Browsers will revalidate, effectively preventing stale content, but proxies can still cache it. 'private' restricts caching to browsers only, 'no-store' forbids caching entirely, and 'public' allows caching everywhere.

❓ Configuration

advanced

How to configure nginx to disable caching for all HTML files?

Choose the correct nginx configuration snippet that disables caching for all .html files by setting Cache-Control headers.

A

location ~* \.html$ {
  add_header Cache-Control "public, max-age=3600";
}

B

location ~* \.html$ {
  add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
}

C

location ~* \.html$ {
  add_header Cache-Control "private, max-age=86400";
}

D

location ~* \.html$ {
  add_header Cache-Control "max-age=31536000";
}

💡 Hint

Disabling caching means telling browsers and proxies not to store the response.

The configuration in option B sets Cache-Control headers that instruct browsers and proxies not to cache the HTML files by using 'no-store' and 'no-cache' along with revalidation directives and max-age=0. Other options allow caching.

❓ Troubleshoot

advanced

Why is nginx not sending Cache-Control headers despite add_header directive?

You added 'add_header Cache-Control "max-age=3600";' inside a location block, but curl responses do not show Cache-Control headers. What is the most likely reason?

A Cache-Control headers are overridden by browser settings

B The syntax of add_header is incorrect and causes it to be ignored

C The add_header directive is ignored for 4xx and 5xx responses by default

D nginx does not support Cache-Control headers

💡 Hint

Check nginx behavior for error responses and add_header.

By default, nginx only adds headers with add_header on successful (2xx) responses. For error responses (4xx, 5xx), add_header is ignored unless you use 'always' parameter. So if the response is an error, Cache-Control won't be sent.

🔀 Workflow

expert

Order the steps to implement and verify Cache-Control headers in nginx

Put these steps in the correct order to add Cache-Control headers and verify they work.

A 1,2,3,4

B 2,1,3,4

C 1,3,2,4

D 3,1,2,4

💡 Hint

Think about editing config, applying it, then testing.

First edit the config, then reload nginx to apply changes, then test with curl, and finally confirm the header is correct.

Practice

1. What is the purpose of the Cache-Control header in nginx?

easy

A. To set the server's IP address

B. To configure SSL certificates

C. To tell browsers how to cache files

D. To define the server's hostname

Solution

1. Step 1: Understand HTTP headers role

   HTTP headers communicate instructions between server and browser.

2. Step 2: Identify Cache-Control header function

   Cache-Control tells browsers how and when to cache content.

3. Final Answer:

   To tell browsers how to cache files -> Option C

4. Quick Check:

   Cache-Control = caching instructions [OK]

Hint: Cache-Control controls browser caching behavior [OK]

Common Mistakes:

• Confusing Cache-Control with server IP settings
• Thinking Cache-Control manages SSL
• Mixing Cache-Control with hostname configuration

2. Which is the correct nginx directive to add a Cache-Control header that caches content for 1 hour?

easy

A. add_header Cache-Control "max-age=3600";

B. cache_control add "max-age=3600";

C. set_header Cache-Control "max-age=3600";

D. header_add Cache-Control "max-age=3600";

Solution

1. Step 1: Recall nginx syntax for headers

   nginx uses add_header directive to add HTTP headers.

2. Step 2: Match correct syntax for Cache-Control

   The correct syntax is add_header Cache-Control "max-age=3600"; to set caching for 3600 seconds (1 hour).

3. Final Answer:

   add_header Cache-Control "max-age=3600"; -> Option A

4. Quick Check:

   add_header + Cache-Control + max-age=3600 = correct [OK]

Hint: Use add_header directive for Cache-Control in nginx [OK]

Common Mistakes:

• Using incorrect directive names like set_header
• Wrong order of words in directive
• Missing quotes around header value

3. Given this nginx config snippet:

location /images/ {
  add_header Cache-Control "public, max-age=86400";
}

What will the Cache-Control header instruct browsers for requests to /images/logo.png?

medium

A. Do not cache the image

B. Cache the image for 1 day and allow shared caches

C. Cache the image only privately for 1 hour

D. Cache the image forever without expiration

Solution

1. Step 1: Analyze Cache-Control directives

   "public" means cache is allowed by browsers and shared caches. "max-age=86400" means cache for 86400 seconds (1 day).

2. Step 2: Apply to /images/logo.png request

   Requests to /images/ get this header, so browsers and proxies cache the image for 1 day.

3. Final Answer:

   Cache the image for 1 day and allow shared caches -> Option B

4. Quick Check:

   public + max-age=86400 = 1 day shared cache [OK]

Hint: "public" + max-age seconds means shared cache allowed [OK]

Common Mistakes:

• Thinking "public" disables caching
• Confusing max-age seconds with hours
• Assuming private caching only

4. You added this line in nginx config:

add_header Cache-Control "max-age=3600";

But browsers still cache content longer than 1 hour. What is the likely problem?

medium

A. Cache-Control header is ignored by browsers

B. The max-age value is too low

C. You need to restart nginx for add_header to work

D. The add_header directive is inside a location block but response code is 304

Solution

1. Step 1: Understand add_header behavior with response codes

   By default, nginx does not add headers with add_header on 304 Not Modified responses.

2. Step 2: Identify why caching is longer

   If response is 304, Cache-Control header may be missing, causing browsers to use old cache rules.

3. Final Answer:

   The add_header directive is inside a location block but response code is 304 -> Option D

4. Quick Check:

   add_header skips 304 responses by default [OK]

Hint: add_header skips 304 responses unless configured [OK]

Common Mistakes:

• Assuming max-age value controls server cache
• Thinking browsers ignore Cache-Control
• Believing nginx restart fixes header issues

5. You want to configure nginx to prevent caching of API JSON responses but allow caching of static CSS files for 7 days. Which configuration is correct?

hard

A. location /api/ { add_header Cache-Control "no-store, no-cache, must-revalidate"; }
location /css/ { add_header Cache-Control "public, max-age=604800"; }

B. location /api/ { add_header Cache-Control "max-age=604800"; }
location /css/ { add_header Cache-Control "no-cache"; }

C. location /api/ { add_header Cache-Control "public, max-age=0"; }
location /css/ { add_header Cache-Control "private, max-age=604800"; }

D. location /api/ { add_header Cache-Control "max-age=0"; }
location /css/ { add_header Cache-Control "no-store"; }

Solution

1. Step 1: Prevent caching for API JSON responses

   Using "no-store, no-cache, must-revalidate" ensures browsers do not cache API responses.

2. Step 2: Allow caching for CSS files for 7 days

   "public, max-age=604800" allows shared caches and browsers to cache CSS for 604800 seconds (7 days).

3. Final Answer:

   location /api/ { add_header Cache-Control "no-store, no-cache, must-revalidate"; } location /css/ { add_header Cache-Control "public, max-age=604800"; } -> Option A

4. Quick Check:

   no-cache API + public 7-day CSS = correct config [OK]

Hint: Use no-cache for API, public max-age for static files [OK]

Common Mistakes:

• Mixing cache directives for API and static files
• Using private instead of public for CSS caching
• Setting max-age=0 for static files incorrectly