Trailing slash normalization in Nginx - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to redirect URLs ending with a slash to the same URL without the slash.

Nginx

rewrite ^(.+)/$ [1] permanent;

Drag options to blanks, or click blank then click option'

A$1

B$1/

C$2

D$0

Attempts:

3 left

💡 Hint

Common Mistakes

Using $1/ adds an extra slash instead of removing it.

Using $0 repeats the whole matched string including the slash.

The rewrite directive uses $1 to capture the URL without the trailing slash and redirects permanently.

2fill in blank

medium

Complete the code to redirect URLs without a trailing slash to the same URL with a slash.

Nginx

rewrite ^(.+[^/])$ [1] permanent;

Drag options to blanks, or click blank then click option'

A$1/

B$2/

C$1

D$0/

Attempts:

3 left

💡 Hint

Common Mistakes

Using $1 without slash does not add the trailing slash.

Using $0/ repeats the whole matched string and adds slash redundantly.

The rewrite adds a trailing slash by appending / to the captured URL $1.

3fill in blank

hard

Fix the error in the location block to normalize trailing slashes by redirecting URLs ending with a slash to without slash.

Nginx

location / {
    if ($request_uri ~ [1]) {
        return 301 $scheme://$host$1;
    }
}

Drag options to blanks, or click blank then click option'

A^(.+)$

B^(.+)/

C^(.+)/$

D^(.+)$/

Attempts:

3 left

💡 Hint

Common Mistakes

Using a pattern without the trailing slash does not match URLs ending with slash.

Missing parentheses means $1 is undefined.

The regex ^(.+)/$ matches URLs ending with a slash and captures the part before it in $1 for redirection.

4fill in blank

hard

Fill both blanks to create a map that normalizes URLs by removing trailing slashes except for root.

Nginx

map $request_uri $normalized_uri {
    default [1];
    ~^(.+)/$ [2];
}

Drag options to blanks, or click blank then click option'

A$request_uri

B$1

C/

D$uri

Attempts:

3 left

💡 Hint

Common Mistakes

Using / as default removes all URIs incorrectly.

Using $uri instead of $request_uri changes the variable meaning.

The map keeps the original URI by default and removes trailing slashes by capturing the part before the slash in $1.

5fill in blank

hard

Fill all three blanks to rewrite URLs to normalized form and redirect permanently.

Nginx

server {
    listen 80;
    server_name example.com;

    map $request_uri $normalized_uri {
        default [1];
        ~^(.+)/$ [2];
    }

    location / {
        if ($request_uri != [3]) {
            return 301 $scheme://$host$normalized_uri;
        }
    }
}

Drag options to blanks, or click blank then click option'

A$request_uri

B$1

C$normalized_uri

D$uri

Attempts:

3 left

💡 Hint

Common Mistakes

Using $uri instead of $request_uri in map default.

Comparing $request_uri with $uri instead of $normalized_uri.

Not capturing $1 in map regex.

The map sets default to $request_uri, removes trailing slash with $1, and the if condition compares $request_uri with $normalized_uri to redirect.

Practice

1. What is the main purpose of trailing slash normalization in nginx?

easy

A. To disable URL rewriting completely

B. To block all URLs that end with a slash

C. To serve different content based on trailing slash presence

D. To ensure URLs are consistent by adding or removing trailing slashes

Solution

1. Step 1: Understand URL consistency

   Trailing slash normalization makes URLs uniform by either adding or removing the slash at the end.

2. Step 2: Identify nginx role

   nginx uses redirects to enforce this consistency, improving user experience and SEO.

3. Final Answer:

   To ensure URLs are consistent by adding or removing trailing slashes -> Option D

4. Quick Check:

   Trailing slash normalization = URL consistency [OK]

Hint: Normalization means making URLs uniform with or without slash [OK]

Common Mistakes:

• Thinking it blocks URLs ending with slash
• Confusing normalization with disabling rewriting
• Assuming different content is served based on slash

2. Which nginx directive is used to redirect URLs for trailing slash normalization?

easy

A. proxy_pass

B. return 301

C. listen

D. root

Solution

1. Step 1: Identify redirect directive

   nginx uses return 301 to send permanent redirects for URL changes.

2. Step 2: Confirm other directives' roles

   proxy_pass forwards requests, listen sets ports, root sets file paths, none redirect URLs.

3. Final Answer:

   return 301 -> Option B

4. Quick Check:

   Redirect = return 301 [OK]

Hint: Redirects use 'return 301' in nginx config [OK]

Common Mistakes:

• Using proxy_pass for redirects
• Confusing listen with redirect
• Using root directive incorrectly

3. Given this nginx snippet, what happens when a user visits /example/?

location /example {
  if ($request_uri ~ ".+/$") {
    return 301 $scheme://$host$uri;
  }
}

medium

A. The URL is redirected to /example without trailing slash

B. The URL stays as /example/ with trailing slash

C. The server returns a 404 error

D. The URL is redirected to /example// with double slash

Solution

1. Step 1: Analyze the if condition

   The condition checks if the URL ends with a slash using regex ".+/$".

2. Step 2: Understand the redirect

   If true, it returns a 301 redirect to the same URL but without the trailing slash (because $uri excludes query string and trailing slash).

3. Final Answer:

   The URL is redirected to /example without trailing slash -> Option A

4. Quick Check:

   Trailing slash removed by redirect = The URL is redirected to /example without trailing slash [OK]

Hint: If URL ends with slash, return 301 redirects to no slash [OK]

Common Mistakes:

• Assuming URL stays unchanged
• Thinking server returns 404
• Expecting double slashes in redirect

4. Identify the error in this nginx config for adding trailing slashes:

location / {
  if ($request_uri !~ "/$") {
    return 301 $scheme://$host$uri/;
  }
}

medium

A. Using $request_uri instead of $uri causes double query strings

B. Missing semicolon after return statement

C. The regex should check for trailing slash presence, not absence

D. Using if inside location is not allowed

Solution

1. Step 1: Understand variables used

   $request_uri includes query string, $uri does not. Adding slash to $uri is safer.

2. Step 2: Identify problem with $request_uri

   Appending slash to $request_uri can cause double query strings or malformed URLs.

3. Final Answer:

   Using $request_uri instead of $uri causes double query strings -> Option A

4. Quick Check:

   Use $uri for clean URL redirects [OK]

Hint: Use $uri, not $request_uri, to avoid query duplication [OK]

Common Mistakes:

• Thinking if inside location is forbidden
• Ignoring query string issues
• Misreading regex logic

5. How would you configure nginx to always add a trailing slash to URLs except for requests to files (like .html or .jpg)?

hard

A. Use proxy_pass to add trailing slash

B. Always append slash to all URLs unconditionally

C. Use an if condition to check if URI lacks slash and does not end with a file extension, then return 301 with slash

D. Disable trailing slash normalization for all URLs

Solution

1. Step 1: Define condition for adding slash

   Check if URL does not end with slash and does not match file extensions like .html, .jpg.

2. Step 2: Use if and return 301 for redirect

   Use nginx if directive with regex to exclude files, then redirect to URL with trailing slash.

3. Final Answer:

   Use an if condition to check if URI lacks slash and does not end with a file extension, then return 301 with slash -> Option C

4. Quick Check:

   Conditional redirect excluding files = Use an if condition to check if URI lacks slash and does not end with a file extension, then return 301 with slash [OK]

Hint: Exclude files by regex, redirect others with slash [OK]

Common Mistakes:

• Appending slash to all URLs including files
• Using proxy_pass for redirects
• Disabling normalization entirely