Trailing slash normalization in Nginx - Mini Project: Build & Apply

Trailing Slash Normalization in nginx

📖 Scenario: You are managing a website using nginx as the web server. Sometimes users visit URLs with or without a trailing slash (like /about or /about/), which can cause duplicate content or broken links. To keep URLs consistent and improve SEO, you want to make sure all URLs end with a trailing slash.

🎯 Goal: Configure nginx to automatically add a trailing slash to URLs that don't have one, except for requests to files (like image.png) or the root URL.

📋 What You'll Learn

Create a server block with a root location

Add a variable to check if the URL ends with a slash

Write a rewrite rule to add a trailing slash if missing

Test the configuration by printing the final rewritten URL

💡 Why This Matters

🌍 Real World

Websites often have inconsistent URLs with or without trailing slashes. Normalizing URLs improves user experience and search engine ranking.

💼 Career

DevOps engineers and site reliability engineers frequently configure web servers like nginx to handle URL normalization and redirects for production websites.

1

Create the basic nginx server block

Write an nginx server block with listen 80; and server_name example.com;. Inside it, create a location / block with root /var/www/html;.

Nginx

# Your code here

Hint

Start by defining a server block listening on port 80 for example.com. Then add a location block for the root path with the root directory.

2

Add a variable to check for trailing slash

Inside the location / block, add a variable $has_trailing_slash that is 1 if the request URI ends with a slash, otherwise 0. Use the set directive and if condition with $request_uri.

Nginx

server {
    listen 80;
    server_name example.com;

    location / {
        root /var/www/html;
        # Your code here
    }
}

Hint

Use set to create the variable and an if block with a regex to check if $request_uri ends with a slash.

3

Add rewrite rule to append trailing slash

Inside the location / block, add an if condition that checks if $has_trailing_slash is 0 and the URI does not contain a dot (to exclude files). If true, use rewrite to redirect to the same URI with a trailing slash and a 301 status.

Nginx

server {
    listen 80;
    server_name example.com;

    location / {
        root /var/www/html;

        set $has_trailing_slash 0;
        if ($request_uri ~ "/$") {
            set $has_trailing_slash 1;
        }

        # Your code here
    }
}

Hint

Use nested if blocks to check both conditions, then use rewrite with permanent to redirect.

4

Print the final rewritten URL for testing

Add a return 200 directive inside the location / block that returns the current URI with a trailing slash if it was added, or the original URI otherwise. Use return 200 "$request_uri"; to display the URI.

Nginx

server {
    listen 80;
    server_name example.com;

    location / {
        root /var/www/html;

        set $has_trailing_slash 0;
        if ($request_uri ~ "/$") {
            set $has_trailing_slash 1;
        }

        if ($has_trailing_slash = 0) {
            if ($request_uri !~ ".+\\..+") {
                rewrite ^(.*)$ $1/ permanent;
            }
        }

        # Your code here
    }
}

Hint

Use return 200 "$request_uri"; to output the current URI for testing purposes.

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